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

【问题标题】：How to best vertically center an image and some text inside a div如何在 div 中最好地垂直居中图像和一些文本
【发布时间】：2010-01-22 02:59:30
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

.key * {
   vertical-align: middle;
}

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

【讨论】：

【解决方案2】：

有许多选项（请参阅Vertical Centering with CSS 了解完整的概要）。哪一个最好取决于许多因素，最重要的是您是否知道内容的维度。

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

【讨论】：

line-height 在垂直居中的浏览器引擎中无法始终如一地工作。我通常在 Webkit 中得到一个像素太低的文本，而在 Gecko 中得到几个像素太高的文本。所以我选择具有相对位置（50%）和负上边距（高度的一半）的显式高度，通常在文本的父锚点上。如果它是无锚的，那么就需要一个跨度，可悲的是。

【解决方案3】：

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

【讨论】：

【解决方案4】：

以下 CSS 将起作用：

.key img {
    vertical-align: middle;
}

希望这会有所帮助！ :-)

【讨论】：