PDA

View Full Version : table vertically aligned middle

quadrant6
10-26-2002, 04:26 AM
i have a table which has align=center thus making it stay in the horizontal center of the page but i would like it to do the same with the vertical center, unfortunately it's not working. I tried:

<table valign=center

.body{
vertical-align: center;
}


<div height="100%" valign=center>
<table..
</div



all fail. :(
redhead
10-26-2002, 11:00 AM
this should do it...

its a nested table inside a div...
<div align="center">
<table style="width: 100%; height: 100%;">
<tr>
<td style="text-align: center; vertical-align: center;">

<table>
<tr>
<td style="background-color: #FF0000;">
This should be completely in the middle...
</td>
</tr>
</table>

</td>
</tr>
</table>
</div>this only works in IE i think - i expect someone has a way to do this with less code and more browsers, though ;)
dauvm
10-27-2002, 03:48 AM
I had lots of trouble figuring this out too... I believe props go to Mcookie for the seemingly simple solution.

<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

table
{
height: 100%;
width: 100%;
text-align: center;
}
</style>
</head>
<body>

<table border="0">
<tr>
<td>

Stuff Goes Here

</td>
</tr>
</table>

</body>
</html>

well redhead, it's more code and more browsers... 1 out of 2 ain't bad :thumbsup:

-Doug
applesauce
10-28-2002, 02:42 PM
I think it's:

vertical-align: middle

(not center)

:)
ronaldb66
10-28-2002, 03:30 PM
It is, and it only aligns an element in respect to its parent element; if the latter one doesn't fill the entire screen height, or window height, or whatever height, results are... well, probably not what you are looking for.
dauvm
10-28-2002, 09:16 PM
well actually...

I stripped my code down to bare essentials... save this and preview it.... I tried it in IE 5.5, Opera 6.05, and moz 1.1... worked in all of them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>center</title>

<style type="text/css">
table {
height: 300px;
width: 300px;
text-align: center;
}

div#center {
border-style: dotted;
}

</style>

</head>
<body>
stuff before the table
<table border="1">
<tr>
<td>
cenetered inside the table
</td>
</tr>
</table>
stuff after the table
</body>
</html>


-Doug