Joh*_*Del 2 css vertical-alignment css3
我有以下代码:
<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差异的原因是因为如果图像是唯一的元素,或者它们是文本的一部分,则对图像的处理方式也不同.
如何将图像视为单个元素取决于页面的呈现模式.在开始时,作为单个元素的图像被视为块元素,并且该行为在某些位置中保留为向后兼容.您应该在页面上放置一个正确的doctype,这样它就不会以怪癖模式呈现,如果它不能解决您的问题,至少它会使它表现得更加一致.