引导列表组未居中答案

【问题标题】：bootstrap listgroup not centered引导列表组未居中
【发布时间】：2016-01-23 15:35:31
【问题描述】：

我创建了一个列表组，但它没有以页面为中心。我能够操纵每个列表组中的文本将其左对齐，但整个元素出现在页面的左侧。没有什么能让我把它放在页面的中心。

CSS：

.list-group{
width:40%;
text-align: center;}

HTML：

<div class="span12">
  <ul class="list-group">
    <li class="list-group-item">
      <span class="badge">0</span>
      <b>Stuff1:</b>
    </li>

    <li class="list-group-item">
      <span class="badge">0</span>
      <b>Stuff2: </b></li>

    <li class="list-group-item">
      <span class="badge">0</span>
      <b>Stuff3:</b></li>
  </ul>
</div>

【问题讨论】：

只需为.list-group添加margin: 0 auto;

标签： html css twitter-bootstrap list

【解决方案1】：

如果我理解正确，您需要将<div> 放在页面中心。在 bootstrap 3 中没有 css 可以做到这一点:( 我用这个类来<div>居中

  .centerBlock {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

但是如果你想对齐你的文本，你可以使用标准类，比如text-center

【讨论】：

【解决方案2】：

在这里回答。使用以下：

 display: block;
 margin: 0 auto;

【讨论】：

【解决方案3】：

使用引导网格类作为

<div class="row">
   <div class="col-md-offset-4 col-md-4">

    <ul class="list-group">
       <li class="list-group-item">
        <span class="badge">0</span>
        <b>Stuff1:</b>
      </li>
      <li class="list-group-item">
        <span class="badge">0</span>
      <b>Stuff2: </b>
      </li>
     </ul>
   </div>
  </div>

【讨论】：