如何在div内垂直居中图像

时间:2010-02-10 14:53:15

标签: css

我有这样的标记:

<div>
  <img />
</div>

div高于img:

div {
  height: 100px;
}

img {
  height: dynamic-value-smaller-than-100px;
}

我需要将图像放在div的中间(在其上方和下方有相同的空白区域)。

我尝试过这个并不起作用:

div {
  vertical-align: middle;
}

16 个答案:

答案 0 :(得分:73)

如果您的图像纯粹是装饰性的,那么将其用作背景图像可能是更具语义性的解决方案。然后,您可以指定背景的位置

background-position: center center;

如果它不是装饰性的并且构成有价值的信息,那么img标签是合理的。在这种情况下,您需要做的是使用以下属性设置包含div的样式:

div{
    display: table-cell; vertical-align: middle 
}

Read more about this technique here。报告不适用于IE6 / 7(适用于IE8)。

答案 1 :(得分:51)

另一种方法是在容器div中设置行高,并使用vertical-align:middle将图像对齐。

HTML:

<div class="container"><img></div>

的CSS:

.container {
  width: 200px; /* or whatever you want */
  height: 200px; /* or whatever you want */
  line-height: 200px; /* or whatever you want, should match height */
  text-align: center;
}

.container > img {
  vertical-align: middle;
}

这是我的头脑。但我以前用过这个 - 它应该可以解决问题。适用于旧版浏览器。

答案 2 :(得分:8)

假设您要将图像(40px X 40px)放在div class =“box”的中心(水平和垂直)上。所以你有以下html:

<div class="box"><img /></div>

您需要做的是应用CSS:

.box img {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
}

你的div甚至可以改变它的大小,图像总是在它的中心。

答案 3 :(得分:5)

这是我以前用于完成CSS垂直居中的解决方案。这适用于所有现代浏览器。

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

摘录:

  <div style="display: table; height: 400px; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
      <div style="position: relative; top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

(用于演示目的的内联样式)

答案 4 :(得分:3)

另一种选择是在display:block上设置img,然后设置margin: 0px auto;

img{
    display: block;
    margin: 0px auto;
}

答案 5 :(得分:2)

由于我也经常被跨浏览器CSS所遗忘,我想在这里提供一个JQuery解决方案。这将获取每个图像的父div的高度,将其除以2并将其设置为图像和div之间的上边距:

$('div img').each(function() {
 m = Math.floor(($(this).parent('div').height() - $(this).height())/2);
 mp = m+"px";
 $(this).css("margin-top",mp);
});

答案 6 :(得分:2)

图像位于div的中间

div img{ 
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    height:50px;
    width:50px;
}

答案 7 :(得分:2)

有五种可能的方法可以使用纯 CSS 将任意大小的图像居中。

  1. 使用 flex 并将 img 标记放在里面(现代浏览器的最佳解决方案):

    div {
        display: flex;
        align-items: center;
        justify-content: center
    }
    
  2. 将图像放入 background-image 并使用 background-position(如 @pixeline explained):

    div {
        background-image: url(...);
        background-position:center center
    }
    
  3. 对父元素使用 display: table,对子元素使用 display: table-cellvertical-align: middle

    div.parent {
        display: table;
    }
    div.child {
        display: table-cell;
        vertical-align: middle;
    }
    
  4. 使用 position:absolutetransform 作为图像和父元素位​​置不被取消:

    div {
        position: relative;
    }
    div > img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    
  5. 使用 line-height 作为元素的相同高度,然后使用 vertical-align在我看来,这是支持更多浏览器(如 IE9>)的最佳解决方案)。

    注意:在一些旧的浏览器中,有时为了安全使用这种方式,您需要在图像所在的行中至少有一个字符。为了解决这个问题,我在父元素的伪元素中使用了一个不可破坏的空间。

    如下例所示:

    div {
        display: block;
        height: 200px;
        width: 200px;
        background-color: purple;
        line-height: 200px;
        text-align: center;
    }
    div:after {
      content: "\a0";
    }
    div > img {
        vertical-align: middle;
    }
    <div><img src="https://via.placeholder.com/100.png/09f/fff" /></div>

答案 8 :(得分:1)

我已经以跨浏览器方式发布了垂直对齐方式(Vertically center multiple boxes with CSS

创建单细胞表。只有表具有跨浏览器vertical-align

答案 9 :(得分:1)

div {

width:200px; 
height:150px; 

display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

display:box; 
box-pack:center; 
box-align:center;

}

<div>
<img src="images/logo.png" />
</div>

答案 10 :(得分:0)

在您的示例中,div的高度是静态的,图像的高度是静态的。为图片提供margin-top( div_height - image_height ) / 2

如果图像是50像素,那么

img {
    margin-top: 25px;
}

答案 11 :(得分:0)

你试过在div上设置保证金吗? e.g。

div {
    padding: 25px, 0
}

顶部和底部。您也可以使用百分比:

div {
    padding: 25%, 0
}

答案 12 :(得分:0)

<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>

答案 13 :(得分:0)

接受的答案对我不起作用。 vertical-align需要一个合作伙伴,以便他们可以在他们的中心对齐。所以我创建了一个空div,它具有父div的全高,但没有宽度供图像对齐。两个对象都需要inline-block才能保持一行。

<div>
    <div class="placeholder"></div>
    <img />
</div>

CSS:

.class {
    height: 100%;
    width: 0%;
    vertical-align: middle;
    display: inline-block
}
img {
    display: inline-block;
    vertical-align: middle;
}

答案 14 :(得分:0)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {

$.fn.verticalAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah)/2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

$(document).ready(function(e) {


$('.in').verticalAlign();


});

</script>

<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>

<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>

</body>
</html>

答案 15 :(得分:0)

如果您希望内容成为div内所需的内容,那么这对我来说就是有用的:

<div style="
  display: table-cell;
  vertical-align: middle;
  background-color: blue;
  width: ...px;
  height: ...px;
">
    <div style="
      margin: auto;
      display: block;
      width: fit-content;
    ">
        <!-- CONTENT -->
        <img src="...">
        <p> some text </p>
    </div>
 </div>