html - 在 Bootstrap 的页面上居中表格

标签 html css twitter-bootstrap

<分区>

我正在尝试使用 bootstrap 将表格居中。

这是 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;
}

最佳答案

您缺少 margin:auto

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

Example

关于html - 在 Bootstrap 的页面上居中表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34271236/

相关文章:

android - phonegap android 应用程序页面导航期间的转换

javascript - 按带有 ":"(冒号)的属性选择元素

html - 防止 Bootstrap 在某些屏幕分辨率下响应

javascript - PDF下载按钮

javascript - 图片不会在 onLoad 函数中显示

html - 谷歌主页上的空白区域

javascript - 我如何使用 jQuery 在多个可折叠元素的列表中 Eloquent 地切换显示/隐藏事件?

javascript - 使用 VueJS 2 在 Bootstrap 开关上触发事件

MVC App 上的 CSS 更改不起作用

php - 验证 HTML 联系表单