问使用浮动属性使div居中
EN

Stack Overflow用户

提问于 2012-01-16 15:23:05

回答 1查看 466关注 0票数 0

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

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>

那么，我如何让我的包装器div居中，而不移除浮动或其他方法来实现这一点呢？谢谢

css

回答 1

Stack Overflow用户

发布于 2012-01-16 15:44:18

由于.wrapper的所有内容都是浮动的，因此需要清除它们。

在关闭.wrapper div之前，移除.wrapper上的浮动并添加<div style="clear:both;"></div>。

然后，您应该能够添加以下内容：

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

你的包装器将居中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8876845

复制

相似问题

问使用浮动属性使div居中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用浮动属性使div居中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用浮动属性使div居中
EN