Question

我在网页上有两个div。一个向左漂浮，一个向右漂浮。我希望它们两者始终水平居中，以便这些div中的所有内容始终位于页面的中间。

CSS：

#appInfoDiv{
float: right;
width: 60%;
background-color: black;
}
#appImgDiv{
float: left;
width: 40%;
}

我希望两个div始终位于水平中心。我尝试了保证金最高点：50％和保证金最低点：50％但它不起作用。

Answer 1

你的意思是这样吗？ `

<div class="body">
  <div class="inner">
    <div id="appInfoDiv">First Div</div>
    <div id="appImgDiv">Second Div</div>
  </div>    
</div>

Css：

.body {
display:block;
position:relative;
width:300px;
height:200px;
border:1px solid red;
}
.inner {
position:absolute;
left:50%;
margin-left:-60px;
top:50%;
margin-top:-25px;
width:120px;
height:50px;
background:green;
max-width:1400px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
padding: 4px 0;
}
#appInfoDiv{
float: left;
width: 60%;
height:40px;
background-color: black;
}
#appImgDiv{
float: left;
width: 40%;
height:40px;
background-color: red;
}

和小提琴：http://jsfiddle.net/nucleo1985/NcbHX/31/

Answer 2

尝试使用text-align:center。如果你在包含#appinfodiv和#appImgDiv的div上使用它，你应该能够使div居中而不必浮动它们。

也可以尝试

而不是浮动容器

display:inline-block
vertical-align:top;

您可能需要稍微减小宽度以使它们保持在同一条线上。

如何水平居中fic？

2 个答案: