HTML / CSS：如何居中浮动div？

Question

我有这个HTML：

<div id="container">
    <div id="boxContainer">
        <div id="box1">
            <span>Text1</span>
        </div>
        <div id="box2">
            <span>Text2</span>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

和以下CSS：

#container {
    width:100%;
    background-color:yellow;
}

#boxContainer {
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

我希望#boxContainer的宽度与#box1和#box2的宽度之和相匹配，但它是100％，因此它不会居中于{{1} }。为什么呢？

我有这个小提琴显示问题：http://jsfiddle.net/dennismadsen/dxbfpbg1/

Answer 1

未浮动的块级元素（如#boxContainer div）将默认为100％宽度。您可以将其更改为display: inline-block以仅占用所需空间。然后，您可以将text-align: center放在其父元素上。

#container {
    text-align: center;
    width:100%;
    background-color:yellow
}

#boxContainer {
    display: inline-block;
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

更新了小提琴：http://jsfiddle.net/dxbfpbg1/2/

Answer 2

因为您使用floats。一种解决方案是使用display: inline-block并将text-align: center设置为容器：

＆＃13;

＆＃13;

#container {
  width: 100%;
  background-color: yellow
}
#boxContainer {
  text-align: center;
  background-color: black;
}
#box1 {
  display: inline-block;
  background-color: blue
}
#box2 {
  display: inline-block;
  background-color: red
}

＆＃13;

<br/>
<br/>
<div id="container">
  <div id="boxContainer">
    <div id="box1">
      <span>Text1</span>
    </div>
    <div id="box2">
      <span>Text2</span>
    </div>
    <div style="clear:both;"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

同样要删除空间，您可以将font-size: 0设置为父容器，并将font-size: Xpx设置为子元素，如：

＆＃13;

＆＃13;

#container {
  width: 100%;
  background-color: yellow;
  font-size: 0;
}
#boxContainer {
  text-align: center;
  background-color: black;
}
#box1 {
  display: inline-block;
  background-color: blue;
  font-size: 16px;
}
#box2 {
  display: inline-block;
  background-color: red;
  font-size: 16px;
}

＆＃13;

<br/>
<br/>
<div id="container">
  <div id="boxContainer">
    <div id="box1"> <span>Text1</span>

    </div>
    <div id="box2"> <span>Text2</span>

    </div>
    <div style="clear:both;"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

display: table

您可以使用display: table and display: table-cell（browser support）代替float来获得您正在寻找的结果。这样做的好处是不需要使用clear或不必使用黑客来摆脱#box1和#box2下方的空间。

#container {
  background-color: yellow
}
#boxContainer {
  display: table;
  margin: 0px auto;
  background-color: black;
}
#box1 {
  display: table-cell;
  background-color: blue
}
#box2 {
  display: table-cell;
  background-color: red
}

<div id="container">
  <div id="boxContainer">
    <div id="box1">
      <span>Text1</span>
    </div>
    <div id="box2">
      <span>Text2</span>
    </div>
  </div>
</div>

display: inline-flex

但是，

display: table有将#box1和#box2强制插入列的缺点。因此，您可以使用的另一个选项是display: inline-flex（browser support）。这允许在#box2足够宽时将#box1包装到下一行，但是，它也缺少display: table具有的浏览器支持。

#container {
  background-color: yellow;
  text-align: center;
}
#boxContainer {
  display: inline-flex;
  flex-wrap: wrap;
  text-align: left;
  background-color: black;
}
#box1 {
  background-color: blue
}
#box2 {
  background-color: red
}

<div id="container">
  <div id="boxContainer">
    <div id="box1">
      <span>Text1</span>
    </div>
    <div id="box2">
      <span>Text2</span>
    </div>
  </div>
</div>