3

我有一个带有 3 个子 DIV 的父 DIV。我需要向左浮动一个 DIV，向右浮动另一个 DIV，并将第三个 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/

谢谢

4

2 回答 2

2

好吧，解决方案之一可能是简单地添加#parent addtext-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;
}

显示：inline-block；使元素的行为与图像非常相似，您可以在容器内居中。

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

于 2013-11-13T21:03:17.927 回答
1

如果可以的话，重新排序你的元素div，不要float#center

查看示例

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

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

于 2013-11-13T21:02:39.310 回答