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

Question

我想在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

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

Answer 1

垂直对齐方式被彻底误解了。 你读过这个吗？

至于为什么文本位于图像的基线，这是因为图像和文本都在div中。 它们不会重叠。 要使文本也居中（暗示它位于图像上方 ），则必须将文本放入div或span并调整其位置（将其设置为相对，并尝试使用左侧和顶部）。

干杯

Answer 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> 

Answer 3

您可以使用background-position属性。

它看起来像这样。

背景：url（path / to / image.whatever）顶部； //将其对齐到顶部。

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

w3schools具有您需要了解的所有背景知识。

Answer 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>