logo标签列表

一个父级DIV中有两个浮动的DIV和一个居中的DIV

csshtml
3
我有一个父级DIV，其中包含3个子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>

我为您创建了一个fiddle来进行测试: http://jsfiddle.net/swS5x/。谢谢。
从中心div中删除float:left。 - Igor Benikov
http://jsfiddle.net/swS5x/ - Gecko
这将把右浮动的 DIV 往下推。 - Michael Samuel
抱歉，由于推迟了最后一次编辑，所以没有保存。http://jsfiddle.net/swS5x/ - Gecko
2个回答
2

那么，其中一种解决方案可能就是在#parent上添加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;
}

display:inline-block;使元素的行为类似于图像，您可以将其居中放置在容器内。

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

这正是我需要的，谢谢 :) - Michael Samuel
1
如果可以的话，请重新排列您的
元素，并且不要将#center浮动。 查看示例 
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

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

赞赏你采用了非常简单的方法，我之前没有想到过！ - Michael Samuel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接