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并调整其位置（设置它）相对并试验左和上）。

干杯

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属性。

它看起来像这样。

background：url（path / to / image.whatever）top; //将它对齐到顶部。

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

之类的操作

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

Answer 4

如果您的文字只有一行高，则可以将行高设置为图像的高度。它将垂直居中文本。然后位置：图像上的绝对值将阻止它干扰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>

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

4 个答案: