如何最好地垂直居中图像和div中的一些文本

Question

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

在'div'中，我想要将图像放在左边 - 以及右边的一些相应文本 - 我希望它们垂直居中显示。最好的方法是什么？

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

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

以下是目前的样子 - http://screencast.com/t/NGMxMjRmMmYt（您会看到星号图像未与“必需”文字垂直对齐.Boooo。

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

Answer 1

将此添加到您的样式应该这样做：

.key * {
   vertical-align: middle;
}

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

Answer 2

有许多选项（完整纲要见Vertical Centering with CSS）。哪一个最好取决于许多因素，最重要的是你是否知道你的内容的尺寸。

如果您只是想让文本与图像相关，那么将文本的line-height设置为图像/容器的高度可能是最简单的方法......

Answer 3

如果容器DIV和Image都有固定的宽度和高度，那么你可以使用CSS，但如果没有，jQuery Center Plugin是目前最好的解决方案。

Answer 4

以下CSS可以使用：

.key img {
    vertical-align: middle;
}

希望这有帮助！ ： - ）