如何在按鈕內將圖標和文本居中？

Question

如何在不指定大小以對齊項目的情況下使圖標和文本居中於按鈕內部？

 .ico { background: url(https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG); width: 32px; height: 32px; display: inline-block; } 

 <button> <span class=ico></span> And some text </button> 

Answer 1

您可以在ico類vertical-align: middle添加vertical-align: middle 。 小提琴在： https : //jsfiddle.net/mnet4hn4/

Answer 2

https://jsfiddle.net/nog2kuta/

 .ico { background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG); width: 32px; height: 32px; display: inline-block; } button { padding: 3px; } button span { display: inline-block; vertical-align: middle; } 

 <button> <span class=ico></span> <span>And some text</span> </button> 

在Chrome，FF，IE（已在11中測試），Opera 12中正常運行