gpt4 book ai didi

css - 图像垂直对齐与 css - 奇怪

转载 作者:行者123 更新时间:2023-12-04 13:45:20 28 4
gpt4 key购买 nike

我有以下代码:

<html>
<head>
<style type="text/css">
#test img {vertical-align: middle;}


div#test {
border: 1px solid green;
height: 150px;
line-height: 150px;
text-align: center;
color: white
}
</style>
</head>

<body>

<div id="test">t<img class="bottom" src="http://www.w3schools.com/css/w3schools_logo.gif" alt="W3Schools" width="270" height="50" /></div>
</body>
</html>

如果我删除图像后面的 t,那么它不会在中心垂直对齐(我在 firefox 中测试过)。现在它对齐了,所以我可以将文本的颜色更改为与背景相同,或者另一种方法是放置内联样式并将其设置为背景。

有没有其他方法可以使用 CSS 垂直对齐图像?我发现这些方法有点麻烦。这在 CSS3 中如何工作?

最佳答案

t 产生差异的原因是,如果图像是唯一的元素,或者它们是文本的一部分,它们将被区别对待。

图像如何被视为单个元素取决于页面的呈现模式。在开始时,作为单个元素的图像被视为 block 元素,并且在某些情况下保留了这种行为以向后兼容。你应该放一个 proper doctype在页面上,这样它就不会以怪癖模式呈现,如果它不能解决您的问题,至少它会使它的行为更加一致。

关于css - 图像垂直对齐与 css - 奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3799475/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com