Question

我知道这个问题已被问了十亿次，但是我已经看过了解决方案而且桌子只是拒绝集中。我希望有人可以帮助我。

这就是我对HTML的看法：

<div id="paccount">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

以下是该div的CSS：

#paccount {
    width: 668px;
    height: 400px;
    background-color: transparent;
    text-align:center;  
}

编辑：我的意思是将文本集中在表格中，抱歉。

Answer 1

你不是以桌子为中心。

您正试图将所有文字集中在一起。

您必须先#paccount div居中。

要做到这一点：

#paccount{
    width:668px;
    height:400px;
    background-color: transparent;
    margin:0 auto; /* Here is the key! */
}

Answer 2

如果您希望div保持在您应该拥有的页面的中心位置：

#paccount {
    width: 668px;
    height: 400px;
border:1px solid black;
    background-color: transparent;
    text-align:center;  
margin-left:auto;
margin-right:auto;
}

但如果你想让表格单元格居中，你应该为表格和单元格创建另一个css规则。

Answer 3

将文字对齐添加到td

<div id="paccount">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

的CSS：

#paccount {
    width: 668px;
    height: 400px;
    background-color: transparent;
    text-align:center;  
}
td{
   text-align:center;
}

Answer 4

将它放在一个名为包装器的div中，就像这样

HTML：

<div id="paccount" class="wrapper">
    <table style="margin: 0 auto;">
        <tr>
            <td width="320" height="150">Order History</td>
            <td width="28" rowspan="4"></td>
            <td width="320" rowspan="4">Personal Information</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td width="320" height="90">Preferences</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="115" colspan="3">Logout</td>
        </tr>
    </table>
</div>

CSS：

.wrapper{
 width: 500px; //you can change this in anything you want feel free to edit.
 margin: 0 auto;
}

表根本不居中

4 个答案: