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

使用高度为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;
}

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

3 个答案: