html - 居中表有问题

标签 html css html-table alignment center

<分区>

我在让这些表格居中对齐时遇到了问题。我试图将它对齐到中心,我试图将它边缘对齐到自动。我不知道如何修复它。有人能帮我吗?

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

}

最佳答案

表格居中,问题是它也是占据其容器中所有水平空间所需的宽度。

默认情况下,表格将是 display: table 并且会收缩包裹其内容(即只需要它的宽度)但是你已经用 display: block< 覆盖了它

.tab_nav 的规则中移除 display: block

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

相关文章:

Javascript - 获取所有表 -> tr 值

.net - 在 asp.net 应用程序 View 中固定元素位置

javascript - 如何避免 Angular 中的元素重叠

javascript - JavaScript 问题

javascript - 在父 div 类的一侧动态分组 html 元素

html - 如何让<div>、<span>或list将表格数据显示为表格?

javascript - 相关链接在 HTML 页面上不起作用

javascript - 修复 JS 粘性标题故障

css - 如何在CSS中选择没有后代li的div?

javascript - 如何向此 Javascript 添加 if/else 语句?