我想用一个非常基本的例子。使用入门页面和网格系统，我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
.．.会产生居中的文本。
然而，它仍然出现在最左边。我做错了什么?
当前回答
只需为你想要的div或标签使用一个类，text-center。我认为它可能会很好。它是一个用于文本对齐中心的引导类。
下面是一些文本对齐引导类:
text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
其他回答
你需要调整。span。
例子:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
从2013年2月开始，在某些情况下，我在“span”div中添加了一个“centric”类:
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
和CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
这是因为span* div被浮动到左边，而“自动边缘”居中技术仅在div没有浮动的情况下才有效。
演示(在JSFiddle上):http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle: http://jsfiddle.net/5RpSh/8/
在保持响应性(移动兼容性)的同时，我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空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 3.1.1及以上版本，用于使内容居中的最佳类是.center-block helper类。
任何文本对齐实用程序类都可以做到这一点。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; }
