Question

我有以下代码：

<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中起作用？

Answer 1

t产生差异的原因是因为如果图像是唯一的元素，或者它们是文本的一部分，则对图像的处理方式不同。

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

Answer 2

而不是t字符使用 它是一个空格。

但我不知道为什么会这样。有什么建议吗？

Answer 3

我认为您的问题是将vertical-align属性应用于错误的元素 - 它应该应用于img的周围元素，在您的情况下为div#test：

div#test {
border: 1px solid green;
height: 150px;
line-height: 150px;
text-align: center;
color: white
vertical-align: middle;
}

我不知道为什么它可以添加t符号，也许是浏览器怪癖？

图像垂直与css对齐 - 奇怪

3 个答案: