Question

我的HTML页面中有两列。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

每个占据页面的一半

#left {
    float: left;
    width: 50%;
}

#right {
    float: left;
    width: 50%;
}

我想在右栏中居图片。我知道我可以通过margin-left: auto; margin-right: auto;使其水平居中。如何使其垂直居中？

Answer 1

我看到的第一个问题是没有为left和right div的高度指定高度;高度应设置为100%或您喜欢的任何值。要使图像垂直居中，我们可以使用绝对定位。我们将设置图像的尺寸（这在任何情况下都是很好的做法），然后设置top:50%和left:50%属性。这会将图像推到盒子外面，所以我们添加的负边距是图像宽度和高度的一半。这将在每次div 中垂直和水平对齐图像！

这是更新后的CSS：

#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}

看看这个JSFiddle：http://jsfiddle.net/bYF7F/2/。

Answer 2

我知道这个问题已被标记为已回答，但您确实提到图像的高度和宽度并不理想。所以我想建议另一个解决方案。

添加：

display: -webkit-flex;
display: flex;

到正确的div，并且：

margin: auto;

到图像。我认为这就是你所追求的。请参阅小提琴http://jsfiddle.net/Fqa7b/

Answer 3

如果使用TABLE而不是DIV，它将自动居中。

列中的垂直居中图像

3 个答案: