Question

我试图将div放在一个外部div中，但我不能。

我的HTML是这样的：

<div class="outterDiv">
  <div class="innerDivBig">
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="clear:both"/>
  </div>
</div>

我的css是这样的：

.outterDiv{
 width: 600px;
 border: 1px solid #f00;
 text-align: center;
}

.innerDivBig{
  margin: 0 auto;
  display:table;
}

这是jsfiddle。

Answer 1

.outterDiv{
 width: 600px;
 border: 1px solid #f00;
 text-align:center;
}

.innerDivBig{

  display: inline-block;
}

https://jsfiddle.net/2a8514nf/7/

Answer 2

更新： https://jsfiddle.net/2a8514nf/4/

我使用display: table因为浏览器计算宽度以适应所有子元素宽度display: table-cell，因此您不必担心宽度。
我也使用padding而不是margin，因为它不会扩展元素，因此父级大小保持不变。

.outer {
    width: 500px;
    border: 1px solid #000;
    padding: 15px;
    margin: 0 auto;
}

.inner {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.inner > div {
    display: table-cell;
    padding: 0 5px;
    text-align: center;
}

.inner > div > div {
    padding: 15px;
    text-align: center;
    border: 1px solid #00F;
}

<div class="outer">
    <div class="inner">
        <div>
            <div>Inner Div 1</div>
        </div>
        <div>
            <div>Inner Div 2</div>
        </div>
        <div>
            <div>Inner Div 3</div>
        </div>
    </div>
</div>

如何将div水平居中于另一个div内

2 个答案: