垂直和水平对齐表格

时间:2014-05-17 03:15:11

标签: html css css3

我正在尝试对齐表格。该表需要水平居中,并从顶部垂直保持相同的边距。

当我使用下面的CSS时,它会使表水平居中,但忽略top:50px。 然后我在CSS上使用position:absolute;,然后它会读取left:50px;但不会水平居中。

我怎样才能做到这一点?我试图远离DIV,但如果这是唯一的方法,我会使用它。

<body>
    <table border="1" id="mainTable">
      <tr>
        <td width="150px" height="100">&nbsp;</td>
        <td width="700px">&nbsp;</td>
        <td width="150px">&nbsp;</td>
      </tr>
      <tr>
        <td height="800">   </td>
        <td></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="100">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
</body>

#mainTable{
    width:1000px;
    top:50px;
    margin-left:auto;
    margin-right:auto;
}

3 个答案:

答案 0 :(得分:0)

您只需在 text-align:center 标记中添加 td

#mainTable tr td{
    text-align:center;
}

检查此 Fiddle Demo

答案 1 :(得分:0)

刚刚解决了。我使用的位置:相对;而不是位置:绝对;它奏效了。

谢谢大家。

答案 2 :(得分:0)

 #mainTable tr td{vertical-align:middle;}