我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
任何文本对齐实用程序类都可以做到这一点。Bootstrap使用.text-center类来居中文本已经有很长一段时间了。
.text-center { text-align: center !important; }
或者您可以创建自己的实用程序。这些年来我看到的一些变化:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
其他回答
这是关于文本居中的(这就是问题的内容)
关于其他类型的内容,请参阅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/
在保持响应性(移动兼容性)的同时,我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空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-->
Bootstrap 2.3有一个文本中心类。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行div或其他类,我想。
中心块也是一个选项没有提到以上的答案
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是,除非类text-center或css text-align:center;在父元素上设置时,元素不知道从哪个点进行自动计算,因此它不会像预期的那样居中。
所以文本中心是一个更好的选择。