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>

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

Answer 4

由于我们定位了固定高度的内容，我们可以使用绝对定位。

button{
    padding: 7px 7px 7px 30px;
    postion:relative;
}

button img{
    width: 22px;
    height: 22px;
    position:absolute;
    left:5px;
    top:50%;
    margin-top:-11px;
}

调整填充并将左侧定位调整到所需的外观。

Answer 5

以下样式垂直对齐按钮的每个直接子项：

button > * {
    vertical-align: middle;
}

DEMO

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

5 个答案: