Html 在引导程序上的页面上居中表格

Centering table on a page on bootstrap

提问by H C

I am trying to center a table using bootstrap.

我正在尝试使用引导程序将表格居中。

Here is the html:

这是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-fluidwould make the table span across the whole page.

但是，无论我如何调整css，表格仍然向左对齐。我确定我错过了一些简单的东西。我还认为container-fluid会使表格跨越整个页面。

here is the css:

这是CSS：

.table th {
    text-align: center;
}

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

回答by Antonio Smoljan

You're missing the margin:auto

你错过了 margin:auto

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

Example

例子

回答by patrick

Change your CSS to:

将您的 CSS 更改为：

table{
   margin: 0 auto
}