0

我有一个 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

4 回答 4

2

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

于 2013-10-17T18:32:45.410 回答
2

您可以将父级设置为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;
}
于 2013-10-17T18:36:21.807 回答
0

您的问题模棱两可；但在我看来，您是在说您希望两者在外盒的中心彼此相邻对齐？

引用：
"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/

于 2013-10-17T18:52:42.907 回答
0

这应该做你想要的：

.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

于 2013-10-17T18:33:44.243 回答