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更改为：

.center {
     text-align: center;
}

JSFiddle

Answer 2

给.center一个宽度，或假定为100％，并且没有余量：

.center {
    margin: 0 auto;
    width: 50%;
}

Answer 3

为什么不试试这个：

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

.center{ 
display: inline-block;
}

Answer 4

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

对齐屏幕中心的文字

4 个答案: