如何將引導程序圖標與按鈕中的文本對齊？

如何將引導程序圖標和圖像對齊到底部？（我正在使用font-awsome作爲圖標）。如何將引導程序圖標與按鈕中的文本對齊？

enter image description here

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

來源

2013-01-16 SunnyShah

試試這個：http://jsfiddle.net/jonschlinkert/CBss2/1/這是什麼樣子應用line-height: 1;

button screen cap

後，我會通過@hajpoj建議不與position財產一盤散沙，是更清晰的方法來解決後來不會產生級聯效應的問題。使用position: relative的另一個問題是每個圖標的大小實際上有點不同。你想通過考慮這一點來減少維護。最好使它出現，就好像它對於大多數正常大小的圖標是底部對齊的，並且當使用大於平均值的圖標時，它與文本適當居中。使用position: relative時，較大的圖標會推到其他圖標的上方並偏離中心。

來源

2013-01-16 19:23:38 jonschlinkert

好點，我不會適用於所有圖標的位置，只是你想要調整的位置。順便說一句，在你的jsfiddle中，你的行高越過了更具體的CSS。 – hajpoj

是的，真的 - 感謝提醒我提及那部分@hajpoj。在引導程序中應用於圖標的通用選擇器將始終被覆蓋，除非您增加特殊性或使用！important（我不建議這樣做），因此需要在源代碼中調整行高。線高度最有效，因爲它會隨着文字周圍的文字進行調整。但是，當所有其他方法都失敗時，我並沒有使用hajpoj的解決方案 - 這樣也可以派上用場 – jonschlinkert

可以使用相對位置。

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

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

來源

2013-01-16 19:20:24 hajpoj

如何將引導程序圖標與按鈕中的文本對齊？

回答

相關問題