Question

我试图通过在外部div上设置边距来使内部div居中，但它似乎不起作用。

所以我的HTML看起来像这样：

<div id="outer">
<div class="inner"><span>H</span></div>
<div class="inner"><span>I</span></div>
</div>

我的CSS看起来像这样：

#outer {
  display: block;
  width: 100%;
  margin: 0 auto; /* This is not working for some reason */
}

#outer .inner {
  display: inline-block; /* Used to put the boxes side by side */
  margin: 0 0 0 1%;
  width: 5%;
}

我无法弄清楚我的CSS代码有什么问题。即使我设定了固定的宽度，它仍然不会成为中心。

Answer 1

只需在text-align: center div中使用#outer css属性来居中.inner div（因为它们display为内嵌元素。

＆＃13;

#outer { text-align:center; }
#outer .inner { display: inline-block;width: 5%; }

＆＃13;

<div id="outer">
   <div class="inner"><span>H</span></div>
   <div class="inner"><span>I</span></div>
</div>

＆＃13;

Div没有按预期居中

1 个答案: