我正试图将列的内容居中。看起来对我没用啊。这是我的HTML:

<div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

JSFiddle演示


当前回答

如果上述工作都没有(就像在我的情况下试图居中输入),我使用Boostrap 4偏移量:

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>  

其他回答

//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

Use:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

而不是

<div class="col-xs-1 center-block">

你也可以使用bootstrap 3 css:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4现在有将内容居中的伸缩类:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

注意,默认情况下,它将是x轴,除非flex方向是列

[2022年4月更新]:测试并包括5.1版本的引导。


我知道这个问题很老了。这个问题并没有提到他使用的是哪个版本的Bootstrap。所以我假设这个问题的答案已经解决了。

如果你们中的任何人(像我一样)偶然发现了这个问题,并使用当前的bootstrap 5.0(2020)和4.5(2019)框架寻找答案,那么这里有解决方案。

引导4.5、5.0和5.1

在列div上使用d-flex justify-content-center,这将使列内的所有内容居中。

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

如果你想在col内对齐文本,只需使用文本中心

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

如果列中有文本和图像,则需要使用d-flex justify-content-center和text-center。

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

没必要把事情复杂化。使用Bootstrap 4,您可以简单地使用边缘自动类my-auto在列内水平对齐项

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

使用文本中心代替中心块。

或者在span元素上使用center-block(我把列做宽了,这样你可以更好地看到对齐):

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>