居中表格有问题[重复]

Question

我无法让这些表格居中对齐。我试图将其对齐到中心，并尝试将其边缘设置为自动。我不知道如何解决它。有人能帮我吗？

HTML 代码：

<div style="background-color:#BA1919;">
    <table class="tab_nav" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td style="border-left:1px solid #951414">SCHOOL</td>
                <td>AIA CAMPUS OFFLINE</td>
                <td>HELP DESK</td>
                <td>THEATRE</td>
                <td>CLOUD</td>
                <td>ISV BUILDING</td>
                <td>LOCAL PUB</td>
                <td>LIBRARY</td>
            </tr>
        </tbody>
    </table>
</div>  

CSS 代码：

@media only screen and (max-width: 768px){

body {
padding:0px;
background-image:url(Gray.png);
background-repeat:repeat;
}

.site {
display:none;
}

.tab_nav td {
padding:15px 5px;
border-right:2px solid #951414;
}

.tab_nav {
margin:auto;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-align:center;
font-size: 12px;
display: block;
}

}

Answer 1

表格居中，问题在于它也是占用容器中所有水平空间所需的宽度。

默认情况下，表格将是display: table，并且会收缩包装其内容（即，只有它需要的宽度），但你已经用display: block 覆盖了它。

从.tab_nav 的规则中删除display: block。

Answer 2

在你的 div 中添加一个包装类名称。

<div class="wrapper" style="background-color:#BA1919;">
    <table class="tab_nav" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td style="border-left:1px solid #951414">SCHOOL</td>
                <td>AIA CAMPUS OFFLINE</td>
                <td>HELP DESK</td>
                <td>THEATRE</td>
                <td>CLOUD</td>
                <td>ISV BUILDING</td>
                <td>LOCAL PUB</td>
                <td>LIBRARY</td>
            </tr>
        </tbody>
    </table>
</div>  

在你的 CSS 中添加这个

.wrapper{
 width: 500px;
 margin: 0 auto;
}

Answer 3

它们不居中，因为表格本身占据了 div 宽度的 100%。要使表格居中，请给它一个小于外部 div 的宽度。