[英]How to center icon and text inside of a button?
How can I center icon and text inside of the button without specifiing the sizes to align items? 如何在不指定大小以对齐项目的情况下使图标和文本居中于按钮内部?
.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>
You can add vertical-align: middle
to the class ico
. 您可以在
ico
类vertical-align: middle
添加vertical-align: middle
。 Fiddle at: https://jsfiddle.net/mnet4hn4/ 小提琴在: https : //jsfiddle.net/mnet4hn4/
https://jsfiddle.net/nog2kuta/ 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>
Works fine in Chrome, FF, IE (tested in 11), Opera 12 在Chrome,FF,IE(已在11中测试),Opera 12中正常运行
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.