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

发布于 2024-08-15 19:58:15 字数 486 浏览 3 评论 0 原文

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

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

原文

I would like to vertically align some text and an image in a CSS box.

I tried several methods, here is the code for the last one I tried called "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>

Here is a screenshot of the result in the newest version of Firefox: http://screencast.com/t/Yzg2MzAzNW

The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜空下最亮的亮点 2024-08-22 19:58:15

垂直对齐被彻底误解了。您读过此内容吗？

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

干杯

回复收藏 0 原文

琉璃梦幻 2024-08-22 19:58:15

更改以下内容

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

change the following

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

回复收藏 0 原文

向地狱狂奔 2024-08-22 19:58:15

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

看起来像这样。

背景： url(path/to/image.whatever) 顶部； //将其与顶部对齐。

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

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

回复收藏 0 原文

白衬杉格子梦 2024-08-22 19:58:15

如果您的文本只有一行高，您可以将行高设置为图像的高度。它将垂直居中文本。然后图像上的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>

If your text is only one line high, you can set line-height to the height of your image. It will center the text vertically. Then position:absolute on your image will prevent it from disturbing the positioning of the text in the 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>

回复收藏 0 原文

~没有更多了~