Не может показаться центральным столбцом (bootstrap)

Question

Ive посмотрел несколько популярных ответов на stackoverflow, но он не работает для меня. Я хочу центрировать текст и таблицу в середине страницы. В идеале он должен работать в столбце начальной загрузки, который не равен 12, потому что я хочу добавить в будущем другой столбец рядом с ним в будущем, и я хочу, чтобы они оба были центрированы.

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

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

Это то, что я до сих пор. Это не делает центрирования. Я попробовал другое решение, используя встроенный блок и центр выравнивания текста, но тот центрировал таблицу по-другому, нежели центрировал текст, чего я не хочу. Есть идеи?

Answer 1

Вы можете управлять, как этим дополнением Маржи 0 авто для таблицы.

.col-centered{ 
 
    float: none; 
 
    text-align:center; 
 

 
} 
 

 
.col-centered table{ 
 
    margin:0 auto; 
 
}

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

Answer 2

Итак, по умолчанию текст будет выровнен влево в twitter bootstrap. Таким образом, чтобы сделать его центром, добавьте этот CSS

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

Вот jsFiddle

Надеется, что это помогает :)