使用CSS使固定宽度元素居中

Question

我发现了两种用CSS将固定宽度元素水平居中的常见方法，希望有人能帮我更深入地理解何时使用其中一种技术而不是另一种。

一种技术涉及使用`text-align:center`，而另一种涉及使用`margin:auto`。

下面我演示了如何使用这两种方法来实现相同的效果。看代码，很容易说`margin:auto`方法是全方位更好的方法，但我不禁想知道是否有其他更好的方法来做这种事情，或者是否有情况下`text-align`方法更可取。

您可以在此处查看示例代码：http://dabblet.com/gist/1634534 或以下内容：

<div class="wrap1">
  <h1>Hey now</h1>
</div>

<div class="wrap2">
  <h1>Hey now</h1>
</div>

---

h1 {
    background-color: #CCC;
    width: 200px;
}

div.wrap1 {
    text-align: center;
    background-color: blue;
    padding: 5px;
}
div.wrap1 h1 {
    display: inline-block;
    text-align: left;
}

div.wrap2 {
    background-color: red;
    padding: 5px;
}

div.wrap2 h1 {
    margin: 0 auto;
}

- Adam Fraser

Answer 1

当您的页面中有文本需要移动时，应使用text-align CSS属性。

如果您想将div居中显示在屏幕上，则应始终使用margin：auto。从语义上讲，在实践中，margin：auto是每个人在居中块方面使用的方法。

因此，如果您想放置h1，请使用text-align（请参见下面的链接，他们在标题块上使用text-align）。

编辑：请查看这个页面以获取常见做法：http://www.w3schools.com/cssref/pr_text_text-align.asp

- Alex

Answer 2

http://reference.sitepoint.com/css/text-align:

text-align 属性用于控制块级元素内行内内容的对齐方式，当行内盒子的宽度之和小于行盒子的宽度时。

http://reference.sitepoint.com/css/margins :

Margin 属性允许作者控制盒子的外边距。

- Zul

Answer 3

我认为答案在实现中。

Wrap1使用display: inline-block。通过使元素周围的元素成为“内联”，意味着它们将在同一平面上水平显示。

Wrap2使用margin: 0 auto，并且显示为default: block。这当然使元素成为块级元素，因此它将在其自己的行上可视化显示。

结论是，如果您想要居中一堆内联对象，请使用display: inline-block。如果您要居中单个块级元素，则margin: 0 auto解决方案有效。

P.S. display: inline-block解决方案也适用于可变宽度元素

编辑：这里有一个jsfiddle，其中包含您的示例，但已编辑以显示可变宽度元素和多个内联元素。

- Michael

---

我喜欢你提到如何居中多个inline-block元素，因为我最近遇到了这种情况。然而，在容器上使用text-align:center感觉不对。似乎这种情况最好是将内联元素包装在具有margin: 0 auto的父级中...很难避免“div病”，但我想不到更好的方法。 - Adam Fraser

注意：上述示例涉及固定宽度元素。 - Adam Fraser