Центрирование таблицы на странице загрузки

Я пытаюсь центрировать таблицу с помощью бутстрапа.

Вот 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>

Однако, независимо от того, как я настраиваю css, таблица по-прежнему выравнивается влево. Я уверен, что мне не хватает чего-то простого. Я также думал, что container-fluid сделает стол по всей странице.

вот css:

.table th {
    text-align: center;
}

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

Ответы

Ответ 1

Вам не хватает margin:auto

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

пример

Ответ 2

Измените свой CSS на:

table{
   margin: 0 auto
}