Question

我正在尝试遵循一个非常基本的例子。使用starter page and the grid system，我希望以下内容：

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

...会生成居中的文字。

然而，它仍然出现在最左边。我做错了什么？

Answer 1

这是用于文本居中（这是关于的问题）

有关其他类型的内容，请参阅Flavien's answer。

更新：Bootstrap 2.3.0+回答

最初的答案是针对早期版本的bootstrap。从bootstrap 2.3.0开始，你可以简单地给div上课.text-center 。

原始答案（2.3.0之前版本）

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

Answer 2

注意：这是removed in Bootstrap 3。

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

Answer 3

我猜这里的大多数人实际上是在寻找以整个div 为中心的方式，而不仅仅是文本内容（这是微不足道的......）。

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

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

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

Answer 4

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类来居中文本。

Answer 5

更新2018年 - Bootstrap 4

“中心内容”可能意味着许多不同的事情，自原始帖子以来，Bootstrap中心变化很大。

横向中心

Bootstrap 3

text-center用于display:inline元素
center-block以display:block元素为中心
col-*offset-*到中心网格列
请参阅this answer以使导航栏居中

Demo Bootstrap 3 Horizontal Centering

Bootstrap 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元素置于定义的宽度，（%，{ {1}}，vw等。）。默认情况下在网格列上使用Flexbox ，因此还有各种flexbox居中方法。

Demo Bootstrap 4 Horizontal Centering

<小时/>

垂直中心

现在Bootstrap 4默认 flexbox 有很多不同的垂直对齐方法：auto-margins，flexbox utils或display utils以及{ {3}}。起初，“vertical align utils”似乎很明显，但这些仅可以使用内联和表格显示元素。这里有一些Bootstrap 4垂直居中选项..

1 - 使用自动边距的垂直中心：

垂直居中的另一种方法是使用px。这会将元素置于其容器中心。例如，my-auto使行成为全高，h-100将垂直居中my-auto列。

col-sm-12

vertical align utils

<div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">Card</div> </div> </div>表示垂直y轴上的边距，相当于：

my-auto

2 - 使用Flexbox的垂直中心：

Vertical Center Using Auto Margins Demo

由于Bootstrap 4 margin-top: auto; margin-bottom: auto;现在是.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>上使用align-items-center垂直居中对齐行中的所有.row ...

col-*

3 - 垂直中心使用Display Utils：

Bootstrap 4有Vertical Center Different Height Columns Demo，可用于<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>，display:table，display:table-cell等。这些可以与display utils对齐使用内联，内联块或表格单元格。

display:inline

vertical alignment utils

Answer 6

执行此操作的最佳方法是定义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越少越好。

Answer 7

截至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/

Answer 8

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

您可以随时将style="text-align:center"添加到您的行div或我认为的其他类。

Answer 9

如果您使用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/

Answer 10

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>

Answer 11

在我这边，我定义了可以使用且易于记忆的新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;}

这是个好主意吗？这有什么好的做法吗？

Answer 12

如果您使用的是Bootstrap 2.0 +

这可以使div以页面为中心。

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Answer 13

您需要使用.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>

Answer 14

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

Answer 15

我首选的方法是在保持响应性（移动兼容性）的同时对信息块进行集中处理，即在您希望居中的内容之前和之后放置两个空的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-->

Answer 16

对于Bootstrap 3.1.1及更高版本，用于居中内容的最佳类是view.top = 16 view.right = self.width view.bottom = self.height self.height = view.bottom助手类。

Answer 17

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

不要在主体中使用容器 - 液体。

Answer 18

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

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

所有类center-block的作用是告诉元素的边距为0 auto，auto是左/右边距。但是，除非类text-center或css text-align：center;在父元素上设置，元素不知道计算出这个自动计算的点，因此它不会按预期居中。

所以文本中心是一个更好的选择。

Answer 19

您可以使用以下任何一种

使用Bootstrap现有班级text-center。
添加自定义样式style = "text-align:center"。
使用列偏移：

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

Answer 20

我创建了这个类，无论屏幕大小如何都保持居中，同时保持响应功能：

.container {
    alignment-adjust: central;
}

Answer 21

只需使用类，文本中心，为您想要的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>

Answer 22

我尝试了两种方法，它可以很好地将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>

<强>结果：

<强>解释

Bootstrap将指定左侧，指定屏幕占用的第一列。如果我们使用offset或push，它会将'this'列移动'那些'很多列。虽然我在偏移的响应性方面遇到了一些问题，但是推送非常棒。

Answer 23

更新2018：

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

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

参考：https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

如何使用Twitter Bootstrap获得中心内容？

23 个答案:

这是用于文本居中（这是关于的问题）

更新2018年 - Bootstrap 4

横向中心

垂直中心