Почему мое изображение не может быть отображено по центру в <div>через мои CSS-коды?

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/

Работает во всех браузерах

---