我想用一个非常基本的例子。使用入门页面和网格系统，我希望如下:
< 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; }
其他回答
注意:这在引导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。只需使用类文本中心
你需要调整。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>
任何文本对齐实用程序类都可以做到这一点。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; }
中心块也是一个选项没有提到以上的答案
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是，除非类text-center或css text-align:center;在父元素上设置时，元素不知道从哪个点进行自动计算，因此它不会像预期的那样居中。
所以文本中心是一个更好的选择。
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
不要主要使用容器流体。
