Question

如果我在父div中有两个div并且所有三个div都有浮动。我要做的是将两个子div对齐，而不是向左移动。

Answer 1

在子div上使用display: inline-block代替float: left，您可以将text-align: center提供给父div。

Answer 2

让我看看我是否理解，所以你有这样的事情：

<div id="parent" style="float:left;">

<div id="child1" style="float:left;"></div>
<div id="child2" style="float:left;"></div>

</div>

如果我正确你想要两个div孩子在父div的中心对齐但是没有移除他们中没有的左浮动。那么我认为这可能有效：

<div id="parent" style="float:left;position:absolute;">

<div id="child1" style="float:left; position:relative; left: 100px"></div>
<div id="child2" style="float:left; position:relative; left: 100px"></div>

</div>

所以在div风格中，尝试通过分配左边的百分比或像素值来居中：它应该工作。我也建议你使用百分比，但首先使用像素来了解它是如何工作的。另一个建议是不在html标签中使用css，我只是告诉你该怎么做，但建议有另一个文件（ style.css）包含在你的html文件中。

Answer 3

此布局可以帮助您：

<强> HTML

<div class="div-p">
    <div class="div-1"></div>
    <div class="div-2"></div>
</div>

CSS - DEMO

.div-p{background-color:#eee;width:640px;height:400px;float:left;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}

如果您想将父div居中，请使用margin:0 auto;并移除float:left;

CSS - DEMO

.div-p{background-color:#eee;width:640px;height:400px;margin:0 auto;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}

Answer 4

#parent{width:100%;}
#child1,#child2{width:90%;margin:0px 5%;}

使用保证金设置您的子宽度百分比。它会将两个子div对齐在中心

Answer 5

您需要为2个子div设置这些样式：

{ width:50%; text-align:center; float:left; height:50px;}

和父div：

{ width:100%; margin: 0 auto; float:left; height:50px;}

注意：高度样式是可选的。

如何居中对齐具有父div的两个div

5 个答案: