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

Question

我试图遵循一个非常基本的例子.使用入门页面和网格系统,我希望以下内容:

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

......会产生中心文本.

但是,它仍然出现在最左边.我究竟做错了什么？

Answer 1

这是用于文本居中(这是问题的关键)

有关其他类型的内容,请参阅Flavien的回答.

更新: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

注意:这在Bootstrap 3中被删除.

Pre-Bootstrap 3,您可以pagination-centered像这样使用CSS类:

<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

I guess most of the people here are actually searching for the way to center the whole div and not only the text content (which is trivial…).

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

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

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

Answer 4

更新2018 - Bootstrap 4

"中心内容"可能意味着许多不同的东西,自从原始帖子以来,Bootstrap中心已经发生了很大的变化.

水平中心

Bootstrap 3

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

演示Bootstrap 3水平居中

Bootstrap 4

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

mx-auto(自动x轴边距)将围绕display:block或display:flex具有一元件限定的宽度,( ,,% 等.).默认情况下,Flexbox在网格列上使用,因此还有各种flexbox居中方法.vwpx

演示 Bootstrap 4水平居中

垂直中心

现在Bootstrap 4 默认是flexbox,有许多不同的垂直对齐方法:自动边距,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的垂直中心:

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

或者,使用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 - 垂直中心使用Display Utils:

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

垂直中心使用Display Utils 演示

Answer 5

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

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

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

Answer 8

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

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

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

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