如何将<div>包含图片(或Flash)的图片与CSS垂直对齐。高度和宽度是动态的。
<div>
这是用于水平和垂直居中的纯CSS2解决方案,而没有已知的容器大小或子大小。不涉及黑客。我在此答案中发现了它,并在此答案中也进行了演示。
该解决方案基于与vertical-align: middle结合使用line-height: 0,其父级具有固定的行高。
vertical-align: middle
line-height: 0
HTML:
<span id="center"> <span id="wrap"> <img src="http://lorempixum.com/300/250/abstract" alt="" /> </span> </span>
和CSS:
html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } #center { position: relative; display: block; top: 50%; margin-top: -1000px; height: 2000px; text-align: center; line-height: 2000px; } #wrap { line-height: 0; } #wrap img { vertical-align: middle; }
在IE8,IE9,Opera 11.51,Safari 5.0.5,FF 6.0,Chrome 13.0的Win7上进行了测试。
唯一的警告是IE7,对此最里面的两个元素必须在一行中声明
<span id="center"> <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span> </span>
请注意,IE7也需要跨度。在所有其他浏览器中,跨度可能是div。