Div 没有按预期居中

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

只需在 #outer div 中使用 text-align: center css 属性将 .inner div 居中（因为它们被 display 编辑为内联元素）。

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

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

Div 没有按预期居中

Div not centering as expected

html

css

alignment