H C H C - 2 months ago 10
HTML Question

Centering table on a page on bootstrap

I am trying to center a table using bootstrap.

Here is the 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>


However, no matter how I adjust the
css
, the table is still aligned to the left. I'm sure I am missing something simple. I also thought
container-fluid
would make the table span across the whole page.

here is the css:

.table th {
text-align: center;
}

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

Answer

You're missing the margin:auto

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

Example