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

Question

在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属性让我的图像在垂直居中显示？

谢谢!

Answer 1

试试这个：

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

-55px将你的图片对齐到真正的中心，它是图片高度的一半。它适用于我在Chrome和Firefox上的应用。http://jsfiddle.net/b24UH/

Answer 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/

它在所有浏览器中都有效