如何將Glyphicon在引導按鈕中垂直居中

我試圖在引導按鈕內放置一個glyphicon。當我減小按鈕的寬度/高度時，圖形不再保持居中，垂直或水平。我可以使用position：relative來修復水平位置。如何將Glyphicon在引導按鈕中垂直居中

但是，我不知道如何解決它的垂直定位。

下面是HTML看起來像什麼：

<button type="button" class="btn btn-default add-podcast-btn"> 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> 
</button>

這裏是CSS的樣子：

.add-podcast-btn { 
    font-size: 11px; 
    text-align: center; 
    width: 25px; 
    height: 25px; 
} 

.glyphicon-center { 
    position: relative; 
    right: 4.5px; 
}

我已經包含了PLNKR顯示怎麼回事： http://plnkr.co/edit/5TAvWpZ3l9ntKpJCJZAA

來源

2015-12-12 Tom O' Brien

引導提供了改變的按鈕的大小，[見的文檔（http://getbootstrap.com/components/#類BTN-下拉菜單調整大小）。你有嘗試過嗎？ – abl

嘗試此http://plnkr.co/edit/06lYcyqGYn5IC6U9N3uR?p=preview

.add-podcast-btn { 
    margin-top: 100px; 
    margin-left: 100px; 
    font-size: 11px; 
    text-align: center; 
    width: 25px; 
    height: 25px; 
    position: relative; 
} 

.glyphicon-center { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

來源

2015-12-12 18:57:54

試試這一行。

<button class="btn btn-default glyphicon glyphicon-plus"></button>

來源

2015-12-12 18:50:29 luk492

如果使用預定義的引導程序按鈕大小，則不需要手動調整按鈕的高度。

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 

 
<button type="button" class="btn btn-lg btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> 
 
</button> 
 
<button type="button" class="btn btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> 
 
</button> 
 
<button type="button" class="btn btn-sm btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> 
 
</button> 
 
<button type="button" class="btn btn-xs btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> 
 
</button> 
 

 
<br/> 
 

 
<button type="button" class="btn btn-lg btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast 
 
</button> 
 

 
<br/> 
 

 
<button type="button" class="btn btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast 
 
</button> 
 

 
<br/> 
 

 
<button type="button" class="btn btn-sm btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast 
 
</button> 
 

 
<br/> 
 

 
<button type="button" class="btn btn-xs btn-default add-podcast-btn"> 
 
    <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast 
 
</button>

來源

2015-12-12 18:57:20 abl

不幸的是，當您使用默認樣式時，圖標並不看起來水平居中。如果仔細觀察，可以看出，特別是在僅查看圖標「btn-xs」和「btn-sm」時。 – Ectropy

如何將Glyphicon在引導按鈕中垂直居中

回答

相關問題