HTML-垂直对齐表格_Html_Css_Html Table_Alignment

HTML-垂直对齐表格

html css

HTML-垂直对齐表格,html,css,html-table,alignment,Html,Css,Html Table,Alignment,可能重复：我想把我的桌子放在一页的中间。它很容易水平对齐，只需使用 <table align="center"></table> 但它不允许这样做： <table align="center" valign="center"> 我也不能将valign放在div中，因为它不是有效的属性我的想法是让一个单元格占据整个页面，然后使用： <Table align="center" width="100%"> <tr><t

可能重复：

我想把我的桌子放在一页的中间。它很容易水平对齐，只需使用

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

但这也不起作用，因为我的

没有占据整个页面。当我将其高度设置为100%时，它只占用必要的空间

有什么想法吗？CSS代码也会很有帮助。

如果您将对象的位置设置为绝对位置，它就会起作用

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


死点
.死亡中心{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
宽度：30%；
身高：30%；
保证金：自动；
背景颜色：绿色；
}
我的居中桌子

不需要任何不推荐使用的属性，如align。

点击该链接后，右键单击打开的页面，并查看源代码

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

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

希望这有帮助

这并非不可能，但每个解决方案都存在问题。诚然，这是CSS的一个缺点，如果W3C能拿出一个标准的解决方案来解决垂直居中的问题，那就太棒了。

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