开发者

HTML - Vertically Align a Table [duplicate]

This question already has answers here: Closed 10 years ago.

Possible Duplicate:

How to Vertically Align a Table in CSS

I would like to place my table smack dab in the center of a page. IT is easy horizontally align it just using

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

But it will not allow this:

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

I also cant put the valign in a div because it is not a valid attribute.

I have the idea of making a cell take up an the entire page then using:

<Table align="center" width="100%">
<tr><t开发者_运维百科d valign="middle" height="100%"></td></tr>
</table>

But that too does not work because my <td> does not take up the entire page. When I set its height to 100% it only takes up the amount of space necessary.

Any Ideas? CSS code would be great help also.


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

After you follow that link, right click the page that opened, and view the source code.

You'll notice that IE is tricky because they use conditional commenting (if you're not used to them, it's tricky). What they are doing is taking the height of the window at line 48 of the code and putting the box at 50% of the window's current height, so it even works when resized.

For the other browsers, it should be pretty clear how they do it...using a combination of position, valign, and text align to achieve desired effect.

Hope this helps!


It works if you set the object's positioning to be absolute.

Here's an example (I only tried it on 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>

No need for any deprecated attributes like align.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜