图像垂直对齐的CSS - 奇怪

我有以下代码：图像垂直对齐的CSS - 奇怪

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

如果删除了吨的图像之后，则它不能在中心垂直对齐（I在测试它火狐）。因为它现在是对齐的，所以我可以将文本的颜色更改为与背景相同，或者另一种方法是放置内联样式并将其设置为背景。

是否有任何其他方式垂直对齐图像与CSS？我发现这些方法有点破解。这将如何在CSS3中工作？

来源

2010-09-26 JohnDel

这是否有文档类型？ – 2010-09-26 19:40:16

这是我创建的一个演示快，我有一个真正的网站，我试过它，它具有doctype为HTML过渡和它具有相同的行为。 – JohnDel 2010-09-26 19:56:29

t造成差异的原因是因为如果图像是唯一元素，或者它们是文本的一部分，则图像被区别对待。

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

来源

2010-09-26 19:53:18 Guffa

事实上，使用html过渡它不起作用，但与doctype严格工作没有字母t。谢谢，尽管这意味着我不能使用doctype transitional来将垂直图像与CSS对齐... – JohnDel 2010-09-26 20:07:37

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

但我不知道为什么会发生这种情况。任何建议家伙？

来源

2010-09-26 19:46:53

我觉得你的问题是一个错误的元素上应用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符号一起使用，也许是浏览器的怪癖？

来源

2010-09-26 19:46:56

此外，这并不适用于对齐在div内的图像。它适用于在给定的“line-height”内的实际行中对齐它......与它将对齐div的实际文本和其他适用的内联元素相同。如果这是div中唯一的东西，那么只有一行，所以你可能会得到你正在寻找的结果...但是如果你将div的高度设置为高于一行的高度，你将获得你想要的结果。 – prodigitalson 2010-09-26 19:52:16

我尝试了垂直对齐的每种可能的组合，但当我删除t时它不起作用。我想知道如何在CSS3中做到这一点正确的方式。 – JohnDel 2010-09-26 19:59:23

图像垂直对齐的CSS - 奇怪

回答

相关问题