IE CSS Bug系列：图片上没有line-height垂直居中 - 网站建设

GEO视角：AI搜索引擎怎么看这篇内容？
常见问题

正在阅读…0%

图片上没有line-height垂直居中

影响的IE版本

这个bug影响IE7, IE6

表现

使用line-height方法时图片没有垂直居中

教程编写时间

2009.7.18 11:39:56

描述

这个bug杀死了我好多脑细胞。我常常在做“产品页面”时，把很多的不同尺寸的图放到相同尺寸的盒子里，使它们看上去更美观。即使是我找到了这个bug的解决办法之后，我依然痛恨它，因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样，我们来看一下示例。

示例（英文原文中查看）

HTML Code：

<div><img src=”hl_logo.png” alt=”” width=”95″ height=”115″></div>
<!– NOTE: no white-space in the <div> also triggers bug in IE7 –>

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中添加空格。（也就是说，<span>元素只在IE7以下版本的中需要）

示例（英文原文中查看）

HTML Code：

<div>
<img src=”hl_logo.png” alt=”” width=”95″ height=”115″>
<span></span>
</div>
<!– NOTE: <span> is not needed for IE7; whitespace is enough –>

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”。最后结果：一切都正常了。

原文链接： haslayout 翻译：伯乐在线 – nighca

译文链接： http://blog.jobbole.com/49703/

GEO视角：AI搜索引擎怎么看这篇内容？

2026年，越来越多用户直接在ChatGPT、豆包、DeepSeek、Kimi中提问，而不是打开搜索引擎。AI引擎会优先引用结构清晰、有明确作者、信息准确的内容。这篇文章围绕”IE CSS Bug系列：图片上没有line-height垂”展开，帮助你理解相关概念和实操方法。

如果你在西安地区，需要本地SEO或GEO优化服务，可以参考王尘宇博客的相关案例。

常见问题