Trung tâm Twitter Bootstrap 3 Glyphicons trong các nút

Question

Tôi hiện đang sử dụng Twitter Bootstrap 3 RC2 cũng như Twitter Bootstrap đã chuyển vào một kho lưu trữ riêng biệt. Tôi đã nhận thấy, nếu sử dụng trong một nút với văn bản vào biểu tượng không được làm trung tâm rất tốt:

Biểu tượng và các văn bản có dòng dưới cùng giống nhau, nhưng tôi tin rằng đối với một tìm nút tốt vào biểu tượng nên được căn giữa dựa trên văn bản, phải không? Bất kỳ ý tưởng làm thế nào để đạt được điều này?

http://bootply.com/74652

Answer 1

Move văn bản ra khỏi <span> với glyphicon và áp dụng vertical-align: middle; đến <span>

<button class="btn btn-default"> 
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered 
    </button> 

Demo

này hoạt động trong Bootstrap 4 với Font biểu tượng awesome như vậy

<button class="btn btn-default" style="vertical-align: middle;"> 
    <i class="fa fa-times"></i> Centered 
</button> 

Answer 2

Hãy thử vertical-align: middle; trên .glyphicon-th:before

Answer 3

<button class="btn btn-default"> 
      <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span> 
      <span style="font-size: 17px;">Not Centered</span> 
    </button> 

xin tăng hoặc giảm kích thước phông chữ theo yêu cầu của bạn

Answer 4

Áp dụng một phong cách vertical-align: -{N}px; trên .glyphicon thứ để chuyển nó N pixel lên/xuống.

Answer 5

cách khác

<button class="btn default" id="IdBack"> 
    <i class="glyphicon glyphicon-hand-left"></i> 
    <b>Back</b> 
</button> 

Answer 6

Không ai trong số các phương pháp trên làm việc tốt cho tôi bằng chính mình, nhưng sử dụng display: inline-block; vertical-align: middle trên các yếu tố đã làm. Đó là số inline-block dường như là chìa khóa.

.vcenter * { 
    vertical-align: middle; 
    display: inline-block; 
} 

.btn i { 
    margin-left: 10px; 
    font-size: 20px; 
} 

với

<div class="vcenter"> 
    <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> 
    <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> 
    <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> 
</div> 

Xem http://www.bootply.com/UbY78zM8pD ví dụ sống.

Answer 7

tôi cố gắng làm điều đó như thế này:

.glyphicon.center:before { 
    vertical-align: middle; 
} 

và sử dụng <span class="glyphicon center glyphicon-th"></span>.

Answer 8

Thêm lề của các pixel hoặc phần trăm cụ thể. Trong ứng dụng của tôi, điều này làm việc rất đẹp, dựa trên kích thước của khu vực.

CSS:

.someWrapperClass button span { 
    margin-top: 120%; 
} 

HTML:

<div class="someWrapperClass"> 
    <button type="button" ng-click="SomeMethod()"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </button> 
</div> 

Answer 9

Đối với một số vertical-align có thể không hoạt động do vị: Nếu bạn nhìn vào lớp .glyphicon bạn sẽ thấy nó được đặt thành tương đối, hãy thử đặt nó thành 'kế thừa' e.g:

.glyphicon.v-centered { 
    position: inherit; 
    vertical-align: middle; 
} 

Điều này cũng sẽ hoạt động cho các biểu tượng không có trong nút, ví dụ: tab.

Answer 10

Vấn đề: Biểu tượng Glyph cao hơn 2 px so với văn bản nút. Cố định nó như sau bằng cách sử dụng các ví dụ ở đây. Cảm ơn bạn (Alastair Maw).

tôi quản lý để có được tôi làm việc như sau:

HTML

<div class="col-xs-12"> 
    <a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard"> 
     <span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information 
    </a> 
</div> 

CSS

#panelTopic .glyph_Credit { 
    vertical-align: middle; 
    display: inline-block; 
    padding-bottom:6px; 
}