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

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

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

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


当前回答

添加答案。希望它能帮助到别人

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div class='d-flex flex-row justify-content-center'>
      <img     
        className='img-fluid'       
        src="<url>"
          />
    </div>
    </div>
</div>

其他回答

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

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

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

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

任何文本对齐实用程序类都可以做到这一点。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; }

注意:这在引导3中被移除。


在bootstrap 3之前,你可以像这样以分页为中心使用CSS类:

<div class="span12 pagination-centered">
    Centered content.
</div>

以类分页为中心已经在bootstrap.css(或bootstrap.min.css)中,并且只有一个规则:

.pagination-centered{text-align:center;}

使用Bootstrap 2.3.0。只需使用类文本中心

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

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

使用Bootstrap现有的类文本中心。 添加自定义样式,style = "text-align:center"。 使用列偏移量: 例如:<div class="col-md-offset-6 col-md-12"></div>