2

我的 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;。我怎样才能使它垂直居中？

4

3 回答 3

1

我看到的第一个问题是没有为leftand right divs 的高度指定高度；高度应设置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/。

于 2013-03-16T19:37:40.650 回答
0

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

添加：

display: -webkit-flex;
display: flex;

到正确的div，并且：

margin: auto;

到图像。我想这就是你所追求的。见小提琴http://jsfiddle.net/Fqa7b/

于 2013-03-17T13:51:44.307 回答
-2

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

于 2013-03-16T19:38:04.623 回答