如何将图像垂直对齐到div的中间位置？

Question

我想把一个图像放在一个div中，并垂直对齐到中间，所以它遵循前面的div。 它是这样

HTML

<div id="navigation">Navigation</div> 
<div id="header"><img src="link"/></div> 
<div id="content">content</div> 

CSS

#header { 
    height: 150px; 
    width: 760px; 
    background: red; 
} 

我需要为了什么行代码来实现这一目标？每当我把图像，它停留在div的底部。我想提高图像，使其达到顶部。没有用于对齐顶部的css代码。就在左边和右边。

Answer 1

你可以使用jQuery吗？如果是的话试试这个：

<script> 
    $(document).ready(function(){ 
     var headerHeight = $(".header").height(); 
     var imageHeight = $(".header img").height(); 
     $(".header img").css("margin-top",Math.floor((headerHeight - imageHeight)/2)); 
    }); 
</script> 

Answer 2

已经回答了这里：How to vertically align an image inside div

使用inline-block的帮手与高度：100％和垂直对齐： 中间的两个元素。

display: inline-block; 
height: 100%; 
vertical-align:middle; 

实施例：http://jsfiddle.net/kizu/4RPFa/74/

Answer 3

使用的CSS：

#header { 
    left:0; 
    right:0; 
    margin:auto; 
}