我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:

< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >

...会产生居中的文本。

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


当前回答

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

不要主要使用容器流体。

其他回答

引导5(更新2021年)

Bootstrap 5仍然使用flexbox网格布局,所以定心工作方式相同。

文本中心到中心显示:内联元素(即:span, img) Mx-auto用于在flex元素内定心 Offset -*或mx-auto可用于列居中(.col-) Justify-content-center到行内的居中列(col-*)

引导4

“以中心为中心的内容”可以有很多不同的含义,自最初的帖子以来,Bootstrap以中心为中心已经发生了很大的变化。

水平居中

引导3

文本中心用于显示:内联元素 从中心块到中心显示:块元素 Col -*offset-*到中心网格列 看到这个答案在导航栏中央

示范引导3水平定心

引导4

文本中心仍然用于显示:内联元素 Mx-auto将center-block替换为center display:block元素 Offset -*或mx-auto可用于网格列居中 row中的Justify-content-center也可以用来居中col-*

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%,vw, px等)。默认情况下,在网格列上使用Flexbox,因此也有各种Flexbox居中方法。

示范引导4水平定心


**Vertical Center** --

现在Bootstrap 4默认是flexbox,有许多不同的方法来使用垂直对齐:自动边距,flexbox utils,或显示utils和垂直对齐utils。起初,“垂直对齐utils”似乎显而易见,但这些只适用于内联和表格显示元素。这里有一些Bootstrap 4垂直定心选项。


1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

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

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

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

Vertical Center Different Height Columns Demo


3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

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

Vertical Center Using Display Utils Demo

我猜这里的大多数人实际上都在寻找将整个div居中的方法,而不仅仅是文本内容(这是微不足道的…)

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

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

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

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

这是关于文本居中的(这就是问题的内容)

关于其他类型的内容,请参阅Flavien的回答。

更新:引导2.3.0+答案

最初的答案是bootstrap的早期版本。从引导2.3.0开始,你可以简单地给div命名为.text-center类。


原始答案(2.3.0之前)

您需要用text-align: center定义这两个类中的一个,row或span12。见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/

最好的方法是定义一个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越少越好。