Question

我有一个有3个孩子DIV的父DIV。我需要向左漂移一个DIV，向右漂浮另一个DIV，并使第3个DIV居中。

父宽度为100％，因此无法修复。

我尝试了以下但是DIV没有居中：

<html>

<head></head>

<body>

<div style="width:100%;border:1px solid #000000;height:200px;">

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>

</div>

</body>

</html>

我为你测试了一个小提琴：http://jsfiddle.net/swS5x/

由于

Answer 1

嗯，其中一个解决方案可能只是添加#parent add text-align:center;和#center，删除float:left;并添加display:inline-block;

#parent {
    width:100%;
    border:1px solid #000000;
    height:200px;
    text-align:center;
}
#center {
    width:50px;
    height:50px;
    border:1px solid #000000;
    margin-top:75px;
    margin-right:auto;
    margin-left:auto;
    display:inline-block;
}

显示：内联块;使元素的行为与图像的行为非常相似，您可以将其放在容器中心。

http://jsfiddle.net/swS5x/2/

Answer 2

如果可以，请重新排序div个元素，而不是float #center

See example

<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

浮动元素将忽略左边距和右边距的margin: auto。

2个浮动的DIV和1个居中的DIV在父DIV中

2 个答案: