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是每个人在使用中心块时使用的。

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

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

Answer 2

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

text-align指定块的内联内容的对齐方式，当内联框的宽度之和小于宽度时的线框。

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

保证金属性允许作者控制框的边距

Answer 3

我认为答案是在实施中。

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

Wrap2使用margin: 0 auto，显示为default: block。这当然使元素成为块元素，因此它将在视觉上显示在线上。

结论是，如果要将一堆内联对象居中，请使用display: inline-block。如果您将单个块元素居中，则margin: 0 auto解决方案可以正常工作。

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

编辑：这是一个带有示例的jsfiddle，但经过编辑后显示了可变宽度元素和多个内联元素。

用css定心固定宽度的元素

3 个答案: