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。