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

Posted 2023-03-05

【中文标题】如何将图像垂直对齐到 div 的中间？ [复制]

【英文标题】：How do you vertically align an image to the middle of a div? [duplicate]

【发布时间】：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 代码。就在左右。

【参考方案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;