HTML: Vertical Alignment?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
thomasd1
Forum Commoner
Posts: 80
Joined: Sat Nov 22, 2003 2:48 pm
Location: Belgium

HTML: Vertical Alignment?

Post by thomasd1 »

Hi

How can I vertically align a table to the middle of a page, and still have valid xHtml?

Thanks
rehfeld
Forum Regular
Posts: 741
Joined: Mon Oct 18, 2004 8:14 pm

Post by rehfeld »

this shouldnt be in the php forum



even when you resize the browser wiondow this will remain in the absolute center of the viewport


the key is the negative margins
notice how they are exactly half of the width and height


have fun

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<style type="text/css">



.abs-center &#123;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    height: 400px;
    width: 400px;
    border: 1px solid #aaa;
&#125;

</style>
</head>
<body>




<table class="abs-center">
<tr>
  <td>table</td>
</tr>
</table>
Post Reply