Question

我看了一些关于stackoverflow的流行答案，但它并不适合我。我想将文本和表格放在页面中间。理想情况下它应该在一个不等于12的引导列中工作，因为我希望将来在它旁边添加另一个列，我希望它们都居中。

＆＃13;

.col-centered{
    float: none;
    margin: 0 auto;
}

＆＃13;

<div class = 'container-fluid'>
  <div class = 'quiz-list'>
  <div class = 'row'>
    <div class = 'col-md-4 col-centered'>
      
      This text should be centered and the table underneath should be centered as well
       
      <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
    
  </div>  
  </div>
  
</div>

＆＃13;

到目前为止我所拥有的。它没有做任何集中。我尝试了使用内联块和文本对齐中心的另一种解决方案，但是那个以不同于文本居中的方式使桌子居中，这是我不想要的。有什么想法吗？

Answer 1

您可以像这样管理为表格添加边距0自动。

＆＃13;

.col-centered{
    float: none;
    text-align:center;

}

.col-centered table{
  margin:0 auto;
}

＆＃13;

<div class = 'container-fluid'>
  <div class = 'quiz-list'>
  <div class = 'row'>
    <div class = 'col-md-4 col-centered'>
      
      This text should be centered and the table underneath should be centered as well
       
      <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
    
  </div>  
  </div>
  
</div>

＆＃13;

Answer 2

因此，默认情况下，文本将在twitter bootstrap中左对齐。因此，要使其成为中心，请添加此css

.col-centered {
  float: none;
  margin: 0 auto;
  text-align: center;
}
.table th {
   text-align: center;   
}

以下是jsFiddle

希望它可以帮助你：）

似乎无法使列居中（引导程序）

2 个答案: