Question

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

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>

Answer 1

在这里回答。使用以下：

 display: block;
 margin: 0 auto;

Answer 2

如果我理解正确，您需要将页面置于<div>的中心位置。在bootstrap 3中没有css可以做到:( 我将此课程用于中心的<div>

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

但是如果你想对齐你的文字，可以像text-center一样使用标准类

Answer 3

使用bootstrap网格类作为

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

bootstrap listgroup不居中

3 个答案: