在按钮元素中间对齐图像和文本

Question

什么是在按钮中间垂直对齐文本和图像的最佳和最简单的方法.例:

button {
  padding: 1px 6px 1px 6px;
}
button img {
  width: 22px;
  height: 22px;
}

<button>
  <img src="http://latvijas-universitates-matematikas-un-informatikas-instituts.atver.lv/images/msn-icon.gif" alt="Text" />
  <span>Text</span>
</button>

Answer 1

虽然@ paislee的解决方案有效,但它并不理想.使用通用选择器(*)时,会对每个元素进行检查(因为CSS从右到左匹配).更好的解决方案,特别是如果所有子元素都已知,则是单独匹配元素.Ergo,button > img, button > span比button > *.

button {
  padding: 1px 6px 1px 6px;
}

/* Add this to align vertically */
button > img,
button > span {
  vertical-align: middle;
}

<button>
  <img src="https://placehold.it/50x50" alt="Text" />
  <span>Text</span>
</button>

Answer 2

填充+ img高度=行高.可以玩一点填充.如果img是奇数高度会更容易,因为中心是一个像素,而eitherside是偶数个像素.

button{
    padding: 1px 6px 1px 6px;
    line-height: 24px;
}

button img{
    width: 22px;
    height: 22px;
        vertical-align: middle;
}?

Answer 3

button{
    padding: 5px 6px 5px 30px;
    background: url('http://latvijas-universitates-matematikas-un-informatikas-instituts.atver.lv/images/msn-icon.gif') no-repeat 5px center;
}