如何将按钮内的图标和文字居中？

Question

如何将按钮内的图标和文字居中，而不指定尺寸以对齐项目？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

https://jsfiddle.net/nog2kuta/

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在Chrome，FF，IE（11中测试），Opera 12

中运行良好

Answer 2

您可以将vertical-align: middle添加到课程ico。 小提琴：https://jsfiddle.net/mnet4hn4/