将两个浮动div居中
[英]Center two floated divs
问题描述
我有一个div容器，其中包含两个其他的div，它们应该彼此对齐。 但是这两个浮动div应该位于外部div的中心。 我怎样才能做到这一点？
示例： http ： //codepen.io/anon/pen/stHqI
HTML：
<div class="section-download clearfix">
<div class="section-download-cover">bla</div>
<div class="section-download-icon">yes</div>
</div>
CSS：
.section-download {
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid black;
}
.section-download-cover {
float:left;
}
.section-download-icon {
float: left;
}
谢谢！
4 个解决方案
解决方案1
2 2013-10-17 18:32:45
您需要在内部div上设置宽度，它们不会神奇地居中对齐。 添加width: 50%; 到每个内部div。
解决方案2
2 2013-10-17 18:36:21
您可以将父级设置为display:inline-block ，并使用text-align:center使其居中。
效果很好-jsFiddle在这里
HTML
<div id="parent">
<div class="float"></div>
<div class="float"></div>
</div>
CSS
#parent {
display:inline-block;
border:3px solid red;
}
.float {
float:left;
width:100px;
height:100px;
border:1px solid black;
}
解决方案3
0 2013-10-17 18:33:44
这应该做您想要的：
.section-download {
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid black;
text-align: center;
}
.section-download-cover,
.section-download-icon {
display: inline-block;
}
您将text-align设置为居中，然后使div为inline-block ，这使它们与文本一起流动，因此拾取text-align: center
解决方案4
0 2013-10-17 18:52:42
您的问题不明确； 但是在我看来，您是在说要使两者在外盒的中心彼此对齐吗？
引用：
"which should be aligned next to each other...in the center of the outside div"
如果这是您想要的，则需要为每个内部框添加高度和宽度。 像这样：
.section-download-cover {
float:left;
width: 70px;
height: 155px;
background: #333;
}
.section-download-icon {
float: left;
width: 70px;
height: 150px;
background: #555;
}
更新：您还需要添加另一个嵌套的div来执行我认为您要的操作。
我称它为.inner-container ，它的宽度必须与两个内部div的合并宽度相同。 例如，如果每个div的宽度为70px，则外部div的宽度必须恰好为140px。
CSS
.inner-container {
margin: 0 auto;
width: 140px;
}
HTML
<body>
<div class="section-download clearfix">
<div class="inner-container">
<div class="section-download-cover">
bla
</div>
<div class="section-download-icon">
yes
</div>
</div>
</div>
</body>
工作jsbin：
http://jsbin.com/OXEPERi/1/
中心浮动 div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.