如何中心图标和文本里面的按钮？ [英] How to center icon and text inside of a button?

问题描述

如何在不指定大小以对齐项目的情况下将图示和文字放在按钮中心？

  .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>和一些文字< / button>  

解决方案>

您可以将 vertical-align：middle 添加到类 ico 。
小调： https://jsfiddle.net/mnet4hn4/

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: middleto the class ico. Fiddle at: https://jsfiddle.net/mnet4hn4/

这篇关于如何中心图标和文本里面的按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！