Làm cách nào để căn chỉnh biểu tượng bootstrap bằng văn bản trong nút?

Question

Làm cách nào để căn chỉnh biểu tượng và hình ảnh khởi động xuống dưới? (Tôi đang sử dụng font-awsome cho các biểu tượng).

JSBIN: http://jsbin.com/uwupuz/2/edit

<div class="btn-group"> 
    <a class="btn" href="#"> 
     <i class="icon-plus"></i> 
     <span>Add</span> 
    </a> 
    <a class="btn" href="#"> 
     <i class="icon-trash"></i> 
     <span>Remove</span> 
    </a> 
    <a class="btn" href="#"> 
     <i class="icon-edit"></i> 
     <span>Edit</span> 
    </a> 
    </div> 

Answer 1

Hãy thử điều này: http://jsfiddle.net/jonschlinkert/CBss2/1/ đây là những gì nó trông giống như sau khi áp dụng line-height: 1;

tôi sẽ không gây rối với các position tài sản theo đề nghị của @hajpoj, có là những cách sạch hơn để khắc phục sự cố không có hiệu ứng xếp tầng sau này. Một vấn đề khác khi sử dụng position: relative là mỗi biểu tượng thực sự có một chút khác biệt về kích thước. Bạn muốn cố gắng duy trì hoạt động bảo trì bằng cách tính toán điều đó. Tốt nhất là làm cho nó xuất hiện như thể nó được căn chỉnh dưới cùng cho hầu hết các biểu tượng có kích thước bình thường và khi một biểu tượng lớn hơn trung bình được sử dụng, nó được căn giữa với văn bản. Sử dụng position: relative một biểu tượng lớn hơn sẽ đẩy lên trên các biểu tượng khác và nhìn ra ngoài trung tâm.

Answer 2

Bạn có thể sử dụng vị trí tương đối.

i { 
    position: relative; 
    bottom: 1px; // or however much you want to offset it by 
} 

http://jsfiddle.net/hajpoj/ZdPGe/