您如何使用Twitter Bootstrap获得居中的内容？

我正在尝试遵循一个非常基本的示例。使用入门页面和网格系统，我希望以下几点：

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

...将产生居中的文字。

但是，它仍然显示在最左侧。我究竟做错了什么？

这是用于文本居中的（这就是问题所在）

有关其他类型的内容，请参见Flavien的答案。

更新：Bootstrap 2.3.0+答案

最初的答案是引导程序的早期版本。从bootstrap 2.3.0开始，您可以简单地给div这个class.text-center。

原始答案（2.3.0之前）

您需要定义两个类之一，row或者span12使用text-align: center。参见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/

注意：这已在Bootstrap 3中删除。

在Bootstrap 3之前，您可以使用CSS类，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内容居中的方法，而不仅仅是文本内容（这是琐碎的……）。

在HTML中使内容居中的第二种方法（而不是使用text-align：center）是使元素具有固定的宽度和自动边距（左右）。使用Bootstrap，定义自动边距的样式是“容器”类。

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

看看这里的小提琴：http : //jsfiddle.net/D2RLR/7788/

更新2019-Bootstrap 4

“居中的内容”可能意味着许多不同的东西，并且自发布以来，Bootstrap居中已发生了很大变化。

水平中心

引导程序3

• text-center用于display:inline元素
• center-block以display:block元素为中心
• col-*offset-* 居中网格列
• 查看此答案以使导航栏居中

演示Bootstrap 3水平居中

引导程序4

• text-center仍用于display:inline元素
• mx-auto替换center-block为中心display:block元素
• offset-* 或 mx-auto可用于居中网格列
• justify-content-center中row也可以用于居中col-*

mx-auto（自动x轴边距）将围绕display:block或display:flex具有一元件限定的宽度，（ ，，% 等。）。默认情况下，在网格列上使用Flexbox，因此也有多种Flexbox居中方法。vwpx

演示 Bootstrap 4水平居中

垂直中心

现在，默认情况下，Bootstrap 4是flexbox，因此有许多不同的垂直对齐方法可以使用：auto-margins，flexbox utils或display utils以及vertical align utils。乍一看，“ vertical align utils”似乎很明显，但它们仅适用于内联和表显示元素。这是一些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的垂直中心：

由于.row现在display:flex使用Bootstrap 4，因此您可以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>

或者，align-items-center整体.row上使所有col-*行垂直居中对齐...

       <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-使用显示实用程序的垂直居中：

自举4具有显示utils的，可以被用于display:table，display:table-cell，display:inline等。这些可与所使用的垂直取向utils的要对齐的内联，内联块或表格单元格的元件。

<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>

垂直中心使用显示实用程序演示

Bootstrap 3.1.1具有一个.center-block用于使div居中的类。请参阅：http : //getbootstrap.com/css/#helper-classes-center。

中心内容块将元素设置为display: block并通过居中margin。可作为mixin和class。

<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越少越好。

.show-grid类在链接的示例中应用居中对齐的文本。

您总是可以style="text-align:center"将div或其他我想的类添加到行中。

从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的位置向左浮动，并且“ auto margin”居中技术仅在div不浮动的情况下有效。

演示（在JSFiddle上）：http : //jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle：http : //jsfiddle.net/5RpSh/8/

如果您使用Bootstrap 3，它还具有名为.text-center的内置CSS类。那正是你想要的。

<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>

任何文本对齐实用程序类都可以解决问题。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; }

您需要用进行调整.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>

在保持响应性（移动兼容性）的同时，将信息块居中的首选方法是在要居中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-blockhelper类。

<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>

请勿在主体上使用液体容器。

中心块也是上述答案中未提及的选项

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

该类center-block所做的只是告诉元素的auto边距为0，其中auto为左/右边距。但是，除非类text-center或css text-align：center; 在父对象上设置时，元素不知道要从中进行此自动计算的点，因此它不会像预期的那样居中。

因此，以文本为中心是一个更好的选择。

您可以使用以下任何一种类型

1. 使用Bootstrap现有类text-center。
2. 添加自定义样式style = "text-align:center"。

3. 使用列偏移量：

   例： <div class="col-md-offset-6 col-md-12"></div>

我创建了此类，以在不考虑屏幕大小的情况下保持居中，同时保持响应功能：

.container {
    alignment-adjust: central;
}

只需将一个文本中心类用于所需的div或标签即可。我认为这可能很好。这是用于文本对齐中心的Bootstrap类。

以下是一些文本对齐的Bootstrap类：

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居中的效果很好。两种方式都会在所有屏幕上对齐div。

方法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>

结果：

说明

引导程序将在左侧指定屏幕占用率的第一列。如果我们使用offset或push，它将把“ this”列移动“ those”许多列。尽管我在抵消能力方面遇到了一些问题，但推动还是很棒的。

更新2018：

在Bootstrap 4.1.3中，可以使用class将内容居中mx-auto。

<div class="mx-auto">
  Centered element
</div>

参考： https //getbootstrap.com/docs/4.1/utilities/spacing/#horizo​​ntal-centering