css - 使用 float 属性使 div 居中

Question

这可能看起来像通常如何使 float 居中的问题，但我需要将 float div 居中的原因是因为其他 div 容器也具有 float 属性。我已经设置了一个高度自动来确定高度取决于包装器 div 内的对象，在包装器 div 内有 2 个 float div 使其并排。但是，如果我没有在包装器上指定 float ，则包装器 div 将只显示 1 条直线(不包装任何东西)

div.wrapper{
width: 1000px;
height: auto;
margin-top: 30px;
float: left;
border:1px solid gray;
}

div.leftcontainer{
width: 200px;
height: auto;
margin-top: 10px;
margin-left: 10px;
border:1px solid gray;
float: left;
}

div.right container{
width: 750px;
height: auto;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
border:1px solid gray;
float: right;
}

这是我的html代码

<div class ="wrapper">
 <div class ="leftcontainer">
   some options
 </div>
 <div class = "rightcontainer">
   some options
 </div>
 <div class = "rightcontainer">
   some options
 </div>

</div>

那么如何在不移除 float 或其他方式的情况下使我的包装器 div 居中？谢谢

Answer 1

包含.wrapper的所有内容 float ，你需要清除它们。

删除 .wrapper 上的 float 并添加 <div style="clear:both;"></div>在关闭 .wrapper 之前分区

然后您应该能够添加:

div.wrapper { 
    /* ... */
    position:relative;
    margin:0 auto;
}

并且您的包装器将居中。