如何将图像垂直对齐到 div 的中间？ [复制]答案

【问题标题】：How do you vertically align an image to the middle of a div? [duplicate]如何将图像垂直对齐到 div 的中间？ [复制]
【发布时间】：2014-03-20 15:05:08
【问题描述】：

我正在尝试将图像放在 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 代码。就在左右。

【问题讨论】：

标签： css image html

【解决方案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>

【讨论】：

不需要使用 jQuery 来垂直对齐图像。

【解决方案2】：

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

使用高度为 100% 和垂直对齐的内联块助手：两个元素的中间。

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

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

【讨论】：

【解决方案3】：

使用以下 CSS：

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

【讨论】：