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

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 从右到左匹配)。更好的解决方案是单独匹配元素，尤其是在所有子元素都已知的情况下。因此，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>