Center Twitter Bootstrap 3按鈕中的圖形標記

Question

我現在使用的是Twitter Bootstrap 3 RC2以及Twitter Bootstrap，它已經進入單獨的存儲庫。我注意到，如果與文本的按鈕圖標不居中很好用：

的圖標和文字具有相同的底線，但我相信，一個漂亮的按鈕圖標應該以文本爲中心，不應該嗎？任何想法如何實現這一目標？

http://bootply.com/74652

Answer 1

移動文本出<span>與glyphicon的增大或減小字體大小和應用vertical-align: middle;到<span>

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

Demo

這個工作在引導4字體真棒圖標，像這樣

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

Answer 2

上.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> 

嘗試vertical-align: middle;請根據您的要求

Answer 4

套用vertical-align: -{N}px;款式上.glyphicon次來接班N個像素向上/向下。

Answer 5

其他方式

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

Answer 6

的方法都沒有上述工作很適合我自己，但材料用display: inline-block; vertical-align: middle一樣。這似乎是關鍵的inline-block。

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

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

與

<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> 

的活生生的例子見http://www.bootply.com/UbY78zM8pD。

Answer 7

我設法做到這一點是這樣的：

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

，並使用<span class="glyphicon center glyphicon-th"></span>。

Answer 8

添加特定像素或百分比的邊距。在我的應用程序中，基於該區域的尺寸，此功能非常精美。

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

對於一些垂直對齊可能由於定位不工作：如果你看看.glyphicon類，你會看到它設置爲相對，嘗試將其設置爲'繼承'e。g：

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

這也適用於不在按鈕中的圖標，例如，標籤。

Answer 10

問題：雕文圖標在按鈕文本上方太高了2 px。在此使用示例修復它。謝謝（Alastair Maw）。

我設法得到我的工作如下：

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; 
}