如何在 CSS 框中对齐文本和图像？答案

【问题标题】：How to align text and image in a CSS box?如何在 CSS 框中对齐文本和图像？
【发布时间】：2009-12-29 22:37:05
【问题描述】：

我想在 CSS 框中垂直对齐一些文本和图像。

我尝试了几种方法，这是我尝试的最后一种方法的代码，称为“display:table-cell-method”

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>

这是最新版 Firefox 中的结果截图：http://screencast.com/t/Yzg2MzAzNW

图像居中正确，文本仅居中几乎正确。它位于图像的基线。为什么？

【问题讨论】：

doctype.com 的人非常擅长回答这类问题。
是的。但我们中的一些人也是如此！ :)
display: table-cell 在 table-row 之外会导致未定义的行为，除非在 IE6-7 中它根本不会导致任何行为。不要这样做。
@bobince 不知道这个。谢谢！

标签： html css vertical-alignment

【解决方案1】：

垂直对齐被彻底误解了。你读过this吗？

为什么文字位置在图片的基线，是因为图片和文字都在div的流动中。它们不会重叠。要使文本也居中（暗示它位于图像上），您必须将文本放入div 或span 并调整其位置（将其设置为相对并进行实验左和上）。

干杯

【讨论】：

事实上：是的，我确实读过这个，大约。 90 分钟前我放弃用谷歌搜索答案并发布在 stackoverflow 上。

【解决方案2】：

更改以下内容

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>

【讨论】：

非常感谢！做到了。

【解决方案3】：

您可以使用背景位置属性。

看起来像这样。

背景: url(path/to/image.whatever) top; //将其与顶部对齐。

您甚至可以执行top left 或top right 等操作。

w3schools 拥有您需要了解的有关背景的所有信息。

【讨论】：

【解决方案4】：

如果您的文本只有一行高，您可以将 line-height 设置为图像的高度。它将垂直居中文本。然后 position:absolute 在您的图像上将防止它干扰 div 中文本的定位：

<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div>
</div>

【讨论】：