html - 用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;
}

Answer 1

text-align CSS 属性仅在页面上有要移动的文本时使用。

如果你想在屏幕上居中放置一个 div，你应该总是使用 margin: auto。从语义上和实践上讲，margin: auto 是每个人在谈到中心 block 时都使用的那个。

因此，如果您想放置 h1，请使用文本对齐(请参阅下面的链接，他们在标题 block 上使用文本对齐)。

编辑:请参阅此页面了解常见做法:http://www.w3schools.com/cssref/pr_text_text-align.asp