如何在块元素中垂直居中图像和文本？ [CSS]

Question

我正在尝试用CSS实现这一目标。这是我的标记：

<h2>
  <img src="A.gif" alt="A" width="30" height="30" />
  <img src="B.gif" alt="B" width="30" height="30" />
  18 pt; vertically centered;
</h2>

• A和B是30x30像素图片。
• 小红线是5个像素的填充/边距（无论哪个有效）
• 由于图像的高度和垂直填充，最外面的容器高度为40px（30 + 5 + 5）。
• 最外面的容器的宽度是100％。

注意： 18pt文本无法溢出容器的宽度。假设它总是一行。

注意：如果有更多标记可以帮助您获得所需的视图，则可以修改标记。

如何实现这一目标？

Answer 1

如果我没弄错的话，您可以使用vertical-align: text-bottom上的img属性来获得此类结果。

这是一个小测试：http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

您可以尝试删除那里的样式并用替换它们 img { vertical-align: text-bottom; }
并且文本应该与页面元素的所需中心对齐。

Answer 2

您可以将行高设置为40px，如果文本只有一行，则应该使文本垂直居中。

h2 {
    line-height: 40px;
}
h2 img {
    padding: 5px;
    vertical-align: middle;
}