html - 在屏幕中心对齐文本

Question

为什么这不起作用？

我有这个:

<div class="center">
  <div class="line">
    text
  </div>
  <div class="line">
    text2
  </div>
  <div class="line">
    text3
  </div>
</div>

在 CSS 中:

.line {
    display: inline-Block;
    width: 150px;
}

.center {
    margin: 0 auto;
}

为什么 .center CSS 不工作？我希望它位于屏幕中央，但它位于左下角。

Answer 1

这是因为您的center div 占据了整个页面的宽度。 line div 与 center div 的左侧对齐。如果您为 center div 指定宽度，它将出现在页面的中央。我为你做了一个例子: http://jsfiddle.net/LGuAq/如果删除 width: 470px; 行，您将看到发生了什么。我添加了一个黑色的 div 边框，只是为了显示每个 div 的位置和大小。