Previous Message
Next Message

Help needed - Vertically aligning a DIV in the centre of the page

Sent by Darren Danks on 17 January 2005 02:02


Thanks Bob, that's just what I needed *grins*. Just the gaps to fix that IE
has so kindly inserted here and there! LOL

Thanks again

Darren

Certified Internet Webmaster
This email has been scanned with fully updated
McAfee VirusScan Pro and is certified virus-free

-----Original Message-----
From: Bob McClelland [EMAIL-REMOVED]] 
Sent: 16 January 2005 13:30
To: Darren Danks
Subject: Re: [css-d] Help needed - Vertically aligning a DIV in the centre
of thepage

Hi Darren,

There are a number of ways 'out there', some involving javascript, most
failing in IE, and all requiring that you know the dimensions of the div.  I
struggled for ages to find one that would just centre the content
automatically, and I finally came up with the following markup:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
<!--
body, html {
 margin  : 0;
 padding  : 0;
 height  : 100%;
}
#layoutgrid{
 display  : table;
 height  : 100%;
 width  : 100%;
}
#layoutgrid td {
 vertical-align : middle;
 text-align  : center;
}
-->
</style>
<body>
<table id="layoutgrid">
  <!-- table, as opposed to strict CSS, is needed for IE centering -->
  <tr>
    <td >
      your div goes here
    </td>
  </tr>
</table>
</body>
</html>

*snipped*

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: