IECSSBug系列：图片上没有line-height垂直居中
图片上没有line-height垂直居中
影响的IE版本
这个bug影响IE7, IE6
表现
使用line-height方法时图片没有垂直居中
教程编写时间
2009.7.18 11:39:56
描述
这个bug杀死了我好多脑细胞。我常常在做“产品页面”时，把很多的不同尺寸的图放到相同尺寸的盒子里，使它们看上去更美观。即使是我找到了这个bug的解决办法之后，我依然痛恨它，因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样，我们来看一下示例。
示例（英文原文中查看）
HTML Code：
CSS Code：
- div {
- width: 150px;
- height: 155px;
- line-height: 155px;
- text-align: center;
- }
- img {
- vertical-align: middle;
- }
在IE8以下版本的IE中，瓢虫的图片没有在垂直方向上居中。（嗨，起码还显示了好么！）
解决方案
以下是上述bug的解决方法（以类型排序）
解决方法 (干净的标记方法)
该方法的时间
2009.7.18 11:52:58
可修复的的版本
所有受该bug影响的版本
描述
我得说明，既然这个解决方法被标记为“干净的标记方法”，如果你支持的最低IE版本为7，那么仅需在div中添加空格。（也就是说，元素只在IE7以下版本的中需要）
示例（英文原文中查看）
HTML Code：
CSS Code：
- div {
- width: 150px;
- height: 155px;
- line-height: 155px;
- border: 1px solid #000;
- background: #f00;
- text-align: center;
- }
- img {
- vertical-align: middle;
- }
- span {
- display: inline-block;
- }
注意我们添加了一个额外的span从而在7以下版本的IE中修复该bug；我们还将display属性设置为inline-block来使我们关键的span拥有“layout”。最后结果：一切都正常了。
本文标题：IECSSBug系列：图片上没有line-height垂直居中
网址分享：http://www.shufengxianlan.com/qtweb/news49/443649.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联