Question

我有一个div容器，其中包含两个其他div，它们应该彼此相邻排列。但是这两个浮动的div应该位于外部div的中心。我怎么能这样做？

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;
}

谢谢！

Answer 1

你需要在内部div上设置宽度，它们不会在中心神奇地对齐。将width: 50%;添加到每个内部div中。

Answer 2

您可以将父级设置为display:inline-block，并使用text-align:center将其居中。

效果很好 - jsFiddle here

<强> 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;
}

Answer 3

这应该做你想要的：

.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

Answer 4

你的问题含糊不清;但在我看来，你说你希望两者在外盒的中心彼此相邻？

<强> QUOTE：
"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

4 个答案: