Tavola di centraggio su una pagina su bootstrap

Question

Sto provando a centrare una tabella usando bootstrap.

Ecco il codice html:

<div class="container-fluid"> 
    <table id="total votes" class="table table-hover text-centered"> 
     <thead> 
      <tr> 
       <th>Total votes</th> 
       <th> = </th> 
       <th>Voter A</th> 
       <th> + </th> 
       <th>Voter B</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>{{ total_votes }}</td> 
       <td> = </td> 
       <td>{{ total_voter_a }}</td> 
       <td> + </td> 
       <td>{{ total_voter_b }}</td> 
      </tr> 
     </tbody>  
    </table> 
</div> 

Tuttavia, non importa quanto regola il css, la tabella è ancora allineato a sinistra. Sono sicuro che mi manca qualcosa di semplice. Inoltre ho pensato che lo container-fluid avrebbe esteso la tabella a tutta la pagina.

qui è il css:

.table th { 
    text-align: center; 
} 

.table { 
    border-radius: 5px; 
    width: 50%; 
    float: none; 
} 

Answer 1

Stai perdendo il margin:auto

.table { 
    border-radius: 5px; 
    width: 50%; 
    margin: 0px auto; 
    float: none; 
} 

Example

Answer 2

Cambia la tua CSS:

table{ 
    margin: 0 auto 
}