Question

我在网络开发事业中集中了许多东西，但我想知道是否有一种简单的方法可以在不知道图像尺寸的情况下垂直居中图像。想象一下我从数据库中获得的缩略图列表。我不希望每个项目都坚持父div的顶部。

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png" />
    </div>
</div>

Answer 1

您可以在父级上使用此CSS：

#parent {
    display:table-cell;
    vertical-align:middle;
}

请注意，这将使父元素的行为类似于内联元素。

Example

Answer 2

如果你的设计不允许你parent内联（如果是的话，使用Purmou的解决方案，那就更好了），你可以在line-height上设置parent等于它{您height上的{1}}和vertical-align: middle;。

演示：http://jsfiddle.net/ThinkingStiff/YRGBk/

HTML：

img

CSS：

<div id="wrapper">
    <div id="parent">
        <img src="http://placehold.it/200x200" />
    </div>
</div>

输出：

enter image description here

Answer 3

#parent img{vertical-align:middle;}

Answer 4

即使没有Javascript，也有一个技巧可以做到这一点。我们需要的是知道父母的身高，我们还需要一个标签。

首先，在IMG-Tag之前或之后添加SPAN标记：

<div id="wrapper">
   <div id="parent">
      <span>&nbsp;</span><img src="path/i/got/from/database/image.png" />
   </div>
</div>

这样，以下CSS声明将图像对齐：

#parent {
   height: 500px;      /* This height is important for the following lines */

   line-height: 500px; /* Text-content needs to get full height for the
                          'vertical-align'-attribute to work */
}
#parent span {
   display: inline-block; /* Should work even for IE6/7 in this case */

   height: 500px;         /* Needed for IE */

   width: 10px;
   margin-right: -10px;   /* Any element to the right is pushed to the left
                             offset of the SPAN-tag */ 
}
#parent img {
   vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */
}

这甚至适用于IE6和7。

修改：

ThinkingStiffs解决方案更简单，因此更好。我只是在IE6中不起作用。
Purmous解决方案不适用于IE6和7，请参阅The display declaration

Answer 5

我在寻找类似问题的解决方案时发现了这个问题，解决方案使用了CSS3，因此无法在IE8及以下版本上工作。

虽然这是一个老问题，但我认为更新的答案可能对某人有用：

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png">
    </div>
</div>

#parent{
    width:400px;
    height:400px;
    background:red; /* just used to highlight box */
    text-align:center;
}    
#parent img{
    position:relative;   
    top: 50%;
    transform: translateY(-50%);
}

看到这个小提琴：http://jsfiddle.net/E9sTk/

Answer 6

您可以使用：

#wrapper{    
height: 100%;
min-height: 500px;/*Assuming min-height of the container*/
position: relative;
width: 100%;}

#parent{    
border: 1px solid;
height: 50px;
position: absolute;
top: 50%;
width: 50px;}

在小提琴中检查这个http://jsfiddle.net/kYgqx/2/

垂直居中不知道尺寸的图像

6 个答案: