2

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

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

4

4 回答 4

4

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

至于为什么文字位置在图片的基线，是因为图片和文字都在div的流中。它们不会重叠。要使文本也居中（暗示它位于图像上方），您必须将文本放入 adiv或 aspan并调整其位置（将其设置为相对并尝试使用 left 和 top）。

干杯

于 2009-12-29T14:18:41.673 回答
3

更改以下内容

<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>
于 2009-12-29T14:36:19.127 回答
0

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

它看起来像这样。

背景：url（路径/到/image.whatever）顶部；//将其与顶部对齐。

你甚至可以做一些类似的top left事情top right。

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

于 2009-12-29T14:19:04.653 回答
0

如果您的文本只有一行高，您可以将 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>
于 2009-12-29T14:37:05.783 回答