html - 如何最好地在 div 内垂直居中图像和一些文本

Question

我经常遇到这个挑战——当我试图解决这个问题时，我总是想知道我是否做错了。

在“div”中，我想将图像放置在左侧 - 并将一些相应的文本放置在右侧 - 我希望它们垂直居中显示。最好的方法是什么？

目前我的 xhtml 看起来像这样:

<div class="key">
 <img alt="required" src="/images/forms/asterisk.png?" /> required
</div>

这是目前的样子 -- http://screencast.com/t/NGMxMjRmMmYt (您会看到星号图像未与“必需”文本垂直对齐。嘘。

我通常会考虑绝对定位图像，然后添加一些左侧填充来移动文本，然后调整顶部和底部填充以使文本垂直居中。最后，这种方法似乎工作量太大了。

Answer 1

将其添加到您的样式中应该可以做到:

.key * {
   vertical-align: middle;
}

您基本上是在说“键类元素内的每个元素都需要垂直居中”。这是我遵循的标记(通常是 .button 类)，适用于 IE、Chrome、FF、Safari。