使用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;
}
我认为答案是在实现。
裹1使用display: inline-block
。通过使它周围的元素内嵌块元素与它“内联”,这意味着它将在同一平面上水平显示。
Wrap2使用margin: 0 auto
和显示器是default: block
。这当然会使元素成为块元素,因此它将在视觉上显示在线上。
结论是,如果您想要将一串内联对象居中,请使用display: inline-block
。如果您正在将一个块元素居中,则margin: 0 auto
解决方案将起作用。
P.S. display: inline-block
解决方案也适用于可变宽度元素
编辑:这里是一个jsfiddle与你的例子,但编辑显示可变宽度元素和多个内联元素。
的文本对齐CSS属性只有当你有文字被用来在页面上移动。
如果你想在你的屏幕上居中div,你应该总是使用margin:auto。在语义上和实践中,保证金:汽车是每个人都使用的中心块。
所以,如果你想放置H1,使用文本对齐(请参阅下面的链接,他们使用文本对齐的标题块)。
编辑:请参阅本页面常见的做法:http://www.w3schools.com/cssref/pr_text_text-align.asp
http://reference.sitepoint.com/css/text-align:
文本对齐指定如何块的联内容被对准, 时的内框的宽度的总和小于所述线框的宽度 。
http://reference.sitepoint.com/css/margins :
保证金性能让笔者来控制盒的保证金
我喜欢你的定心多inline-block的元素,因为这是我居然最近碰到一个案件提。仍然。使用容器上的'text-align:center'感觉不对。看来这种情况下,通过将内联元素封装在具有'margin:0 auto'的父元素中可以更好地服务......难以避免“divitis”,但我想不出更好的方法。 – 2012-01-20 00:28:02
注:上述示例涉及固定宽度的元素。 – 2012-01-20 00:29:31