如何使用Twitter Bootstrap获得中心内容？
我试图遵循一个非常基本的例子。 使用起始页面和网格系统 ，我希望以下内容：
<div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div> …会产生居中的文字。
但是，它仍然出现在最左边。 我究竟做错了什么？
这是用于文本居中（ 这是问题的关键 ）
对于其他types的内容，请参阅Flavien的答案 。
更新：Bootstrap 2.3.0+答案
最初的答案是早期版本的bootstrap。 至于bootstrap 2.3.0， 你可以简单地给div class .text-center 。
原答复（2.3.0之前）
您需要使用text-align: center定义两个类中的一个， row或span12 。 请参阅http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/
注：这在Bootstrap 3中被删除 。
在Bootstrap 3之前，你可以使用以CSS class pagination-centered像这样的：
<div class="span12 pagination-centered"> Centered content. </div>
pagination-centered类已经在bootstrap.css（或bootstrap.min.css）中，并且只有一个规则：
.pagination-centered{text-align:center;}
使用Bootstrap 2.3.0。 只是使用类text-center
我想这里的大多数人实际上是在寻找把整个div中心，而不是文本内容（这是微不足道的）。
第二种方法（而不是使用文本alignment：中心）以HTML为中心的东西是具有固定宽度和自动边距（左和右）的元素。 使用Bootstrap，定义自动边距的样式是“容器”类。
<div class="container"> <div class="span12"> "Centered stuff there" </div> </div>
在这里看看小提琴： http : //jsfiddle.net/D2RLR/7788/
Bootstrap 3.1.1有一个用于居中div的.center-block类。 请参阅： http : //getbootstrap.com/css/#helper-classes-center 。
居中内容块设置要
display: block的元素display: block和居中通过margin。 可作为混合和类。
<div class="center-block">...</div>
或者，正如其他人所说的那样，使用.text-center类来居中文本。
最好的办法是定义一个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越less越好。
更新2017年 – Bootstrap 4 Beta
“中心内容”可能意味着很多不同的事情，Bootstrap中心自原来的post以来已经发生了很大的变化。
水平的中心
Bootstrap 3
-
text-center用于display:inline元素 -
center-block到中心display:block元素 -
col-*offset-*到中心网格列 - 看到这个答案来中心导航栏
演示引导3水平居中
Bootstrap 4
-
text-center仍然用于display:inline元素 -
mx-auto将center-blockreplace为中心display:block元素 -
offset-*或mx-auto可用于居中网格列
mx-auto （自动x轴边距）将居中display:block或display:flex具有定义宽度 （ % ， vw ， px等）的display:flex元素。 Flexbox在网格列上默认使用 ，所以也有各种柔版盒居中方法。
演示引导4水平居中
垂直中心
现在Bootstrap 4 默认是flexbox，有许多不同的垂直alignment方法，使用： 自动边距 ， flexbox utils或显示器utils以及垂直alignmentutils 。 起初“垂直alignment应用程序”似乎是显而易见的，但这些只适用于内联和表格显示元素。 这里有一些Bootstrap 4垂直居中选项..
1 – 使用自动边距的垂直中心：
垂直居中的另一种方法是使用my-auto 。 这将使元素在其容器中居中。 例如， h-100使行全高， my-auto将垂直居中col-sm-12列。
<div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">Card</div> </div> </div>
垂直中心使用自动边距演示
my-auto表示垂直y轴上的边距，相当于：
margin-top: auto; margin-bottom: auto;
2 – 带有Flexbox的垂直中心：
由于Bootstrap 4 .row现在display:flex您可以简单地使用任何列上的align-self-center垂直居中…
<div class="row"> <div class="col-6 align-self-center"> <div class="card card-block"> Center </div> </div> <div class="col-6"> <div class="card card-inverse card-danger"> Taller </div> </div> </div>
或者，在整个.row上使用align-items-center垂直居中alignment行中的所有列。
<div class="row align-items-center"> <div class="col-6"> <div class="card card-block"> Center </div> </div> <div class="col-6"> <div class="card card-inverse card-danger"> Taller </div> </div> </div>
垂直中心不同高度的列演示
3 – 垂直中心使用显示器Utils：
引导程序4具有可用于显示的显示实用程序display:table ， display:table-cell ， display:inline等。这些可以与垂直alignment应用程序一起使用，以alignment内联，内嵌块或表格单元格元素。
<div class="row h-50"> <div class="col-sm-12 h-100 d-table"> <div class="card card-block d-table-cell align-middle"> I am centered vertically </div> </div> </div>
使用Display Utils Demo的垂直中心
截至2013年2月，在某些情况下，我向“span”div添加了一个“居中”类：
<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/
类.show-grid在链接的示例中应用中心alignment的文本。
你总是可以添加style="text-align:center"您的行div或我会想到的其他类。
如果使用Bootstrap 3，它也有内置的CSS类，名为.text-center 。 这就是你想要的。
<div class="text-left"> left </div> <div class="text-center"> center </div> <div class="text-right"> right </div>
请参阅jsfiddle中的示例。 http://jsfiddle.net/ucheng/Q4Fue/
Bootstrap 2.3有一个text-center类。
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
在我身边，我定义了新的CSS样式，可以使用并且易于记忆：
.center { text-align: center;} .left { text-align: left;} .right { text-align: right;} .justify { text-align: justify;} .fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/ .fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/ .vab { vertical-align: bottom;} .bold { font-weight: bold;} .italic { font-style: italic;}
这是一个好主意吗？ 这有什么好的做法吗？
如果您正在使用Bootstrap 2.0+
这可以使div集中到页面。
<div class="row"> <div class="span4 offset4"> //your content here gets centered of the page </div> </div>
任何文本alignment的工具类将做的伎俩。 引导程序已经使用.text-center类来长时间居中文本。
.text-center { text-align: center !important; }
或者你可以创build你自己的工具。 几年来我见过的一些变化：
.u-text-center { text-align: center !important; } .ta-center { text-align: center !important; } .ta\:c { text-align: center !important; }
在保持响应性（移动兼容性）的同时，将信息块span1首选方法是在希望居中的内容之前和之后放置两个空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-->
您需要使用.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版本3.1.1及更高版本，用于居中内容的最佳类别是.center-block帮助程序类。
<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>
主要不要使用容器stream体。
中心块也是上述答案中没有提到的一个选项
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
所有的class级center-block都是告诉元素有一个0自动边距，自动是左/右边距。 但是，除非是class-text-center或css text-align：center; 被设置在父元素上，元素不知道从这个自动计算出来的点，所以它不会像预期的那样居中。
所以文本中心是一个更好的select。
您可以使用以下任何一种types
- 使用Bootstrap现有的类
text-center。 - 添加自定义样式，
style = "text-align:center"。 -
使用列偏移量：
例如：
<div class="col-md-offset-6 col-md-12"></div>
我创build这个类来保持居中，而不pipe屏幕大小，同时保持响应function：
.container { alignment-adjust: central; }
只需使用一个类，文本中心，你想要的div或标签。 我认为这可能工作正常。 这是一个文本alignment中心的Bootstrap类。
这里有一些文本alignment引导类：
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>
我尝试了两种方式，它正常工作，以中心的div。 这两种方式将在所有屏幕上alignmentdiv。
方式1：使用推送：
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px"> <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" --> </div>
方式2：使用偏移：
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px"> <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"--> </div>
结果：
说明
Bootstrap将指定到指定屏幕占用的第一列左侧。 如果我们使用偏移量或推动它将“这”列移动“那些”许多列。 虽然我在抵消的响应面临一些问题，推动是真棒。
