使用CSS定位固定宽度的元素

我发现了用CSS水平居中固定宽度元素的两种常见方法，我希望有人能够帮助我更深入地理解何时可以使用一种技术而不是其他方法。使用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; 
}

来源

2012-01-18 Adam Fraser

我认为答案是在实现。

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

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

结论是，如果您想要将一串内联对象居中，请使用display: inline-block。如果您正在将一个块元素居中，则margin: 0 auto解决方案将起作用。

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

编辑：这里是一个jsfiddle与你的例子，但编辑显示可变宽度元素和多个内联元素。

来源

2012-01-18 18:28:45 Michael

我喜欢你的定心多inline-block的元素，因为这是我居然最近碰到一个案件提。仍然。使用容器上的'text-align：center'感觉不对。看来这种情况下，通过将内联元素封装在具有'margin：0 auto'的父元素中可以更好地服务......难以避免“divitis”，但我想不出更好的方法。 – 2012-01-20 00:28:02

注：上述示例涉及固定宽度的元素。 – 2012-01-20 00:29:31