我想用一个非常基本的例子。使用入门页面和网格系统，我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
.．.会产生居中的文本。
然而，它仍然出现在最左边。我做错了什么?
当前回答
对于Bootstrap 3.1.1及以上版本，用于使内容居中的最佳类是.center-block helper类。
其他回答
在保持响应性(移动兼容性)的同时，我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空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-->
2018年更新:
在Bootstrap 4.1.3中，内容可以使用mx-auto类居中。
<div class="mx-auto">
Centered element
</div>
参考:https://getbootstrap.com/docs/4.1/utilities/spacing/ #水平居中
最好的方法是定义一个css样式:
.centered-text {
text-align:center
}
然后在你需要居中文本的地方，像这样添加它:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
或者如果你只想让p标签居中:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
你使用的内联css越少越好。
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行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>
