为什么我的图片不能通过我的 CSS 代码在 <div> 中垂直居中显示？答案

【问题标题】：Why my image can't be displayed vertical center in <div> via my CSS codes?为什么我的图片不能通过我的 CSS 代码在 <div> 中垂直居中显示？
【发布时间】：2012-02-16 19:57:21
【问题描述】：

在 jsFiddle 上查看我的代码：http://jsfiddle.net/dpMss

HTML 代码：

<div>
    <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="276" height="110" alt="Google China">
</div>

CSS 代码：

div {
    height: 118px;
    line-height: 118px;
    background: red;
}
img {
    vertical-align: middle;
}

1、为什么我的图片不能垂直居中显示？

2、如何通过line-height和vertical-align CSS属性让我的图片垂直居中显示？

谢谢！

【问题讨论】：

它不起作用的原因是因为图像是inline 元素并且将与文本位于同一行。因此，图像下方有额外的填充以容纳在文本行下方占据空间的字母 - 例如 p、q 等 - 因此图像不会显示为垂直对齐。尝试使用 Firebug 将鼠标悬停在图像上，您将在下面看到额外的间距。
This Stack Overflow answer 解释得比我好。

标签： vertical-alignment css

【解决方案1】：

试试这个：

div {
  height: 300px;
  background: red;
}
div img {
  position:relative;
  top:50%;
  margin-top:-55px;
}

-55px 将您的图片与真实中心对齐，它是图片高度的一半。它适用于我的 Chrome 和 Firefox。 http://jsfiddle.net/b24UH/

【讨论】：

【解决方案2】：

这样写：

div {
    height: 200px;
    line-height: 118px;
    background: red;
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
img {
    vertical-align: middle;
}

更新

这样写：

div {
    height: 200px;
    line-height: 200px;
    background: red;
    vertical-align: middle;
    width:100%;
}
img {
    vertical-align: middle;
}

http://jsfiddle.net/dpMss/10/

它适用于所有浏览器

【讨论】：

现在 +1，因为我之前没有看到 line-height 的技巧
这不起作用。您所做的只是将div 和line-height 更改为200px。将它们的高度改回118px，您将遇到与以前完全相同的问题：jsfiddle.net/dpMss/13。
我只是注意到了 vertical-align 属性，并没有过多关注其他任何东西，因为很多人很困惑为什么它不工作 - 到目前为止我认为它只在 td 中工作