html - 如何在 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

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

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

干杯