我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
对于Bootstrap 3.1.1及以上版本,用于使内容居中的最佳类是.center-block helper类。
其他回答
这是关于文本居中的(这就是问题的内容)
关于其他类型的内容,请参阅Flavien的回答。
更新:引导2.3.0+答案
最初的答案是bootstrap的早期版本。从引导2.3.0开始,你可以简单地给div命名为.text-center类。
原始答案(2.3.0之前)
您需要用text-align: center定义这两个类中的一个,row或span12。见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行div或其他类,我想。
在保持响应性(移动兼容性)的同时,我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空span1 div。
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
注意:这在引导3中被移除。
在bootstrap 3之前,你可以像这样以分页为中心使用CSS类:
<div class="span12 pagination-centered">
Centered content.
</div>
以类分页为中心已经在bootstrap.css(或bootstrap.min.css)中,并且只有一个规则:
.pagination-centered{text-align:center;}
使用Bootstrap 2.3.0。只需使用类文本中心
我猜这里的大多数人实际上都在寻找将整个div居中的方法,而不仅仅是文本内容(这是微不足道的…)
在HTML中居中的第二种方法(而不是使用text-align:center)是让元素具有固定宽度和自动边距(左和右)。在Bootstrap中,定义自动边距的样式是“容器”类。
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
看看这里的小提琴:http://jsfiddle.net/D2RLR/7788/