Question

可能重复：
How to Vertically Align a Table in CSS

我想把我的桌子轻轻地放在页面的中心。只需使用

即可轻松水平对齐

<table align="center"></table>

但它不允许这样：

<table align="center" valign="center">

我也不能把valign放在div中，因为它不是一个有效的属性。

我想让一个单元格占用整个页面然后使用：

<Table align="center" width="100%">
<tr><td valign="middle" height="100%"></td></tr>
</table>

但这也不起作用，因为我的<td>没有占用整个页面。当我将其高度设置为100％时，它只占用了必要的空间量。

任何想法？ CSS代码也会很有帮助。

Answer 1

http://www.pmob.co.uk/pob/vertical-center1.htm

关注该链接后，右键单击打开的页面，然后查看源代码。

你会注意到IE很棘手，因为他们使用条件评论（如果你不习惯它们，那很棘手）。他们正在做的是将窗口的高度放在代码的第48行，并将框放在窗口当前高度的50％处，这样在调整大小时它甚至可以正常工作。

对于其他浏览器，应该非常清楚它们是如何做到的......使用position，valign和text align的组合来实现所需的效果。

希望这有帮助！

Answer 2

如果将对象的定位设置为绝对值，则可以正常工作。

这是一个例子（我只在Safari上试过）：

<html>
  <head>
    <title>Dead Center</title>
    <style type="text/css">
      .dead_center {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 30%;
        height: 30%;
        margin: auto;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <table class="dead_center">
      <tr>
        <td>My centered table</td>
      </tr>
    </table>
  </body>
</html>

不需要任何弃用的属性，例如align。

HTML - 垂直对齐表格

2 个答案: