Question

我在让这些表格在中心对齐方面遇到了问题。我试图将它与中心对齐，我试图将其边缘化为自动。我无法找到解决方法。有人能帮我吗？

HTML CODE：

<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覆盖了它。

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

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的宽度。

对中心表有困难

3 个答案: