Hi Joey,
I've wanted to do this for ages, and never found a solution which is rigid
AND which works in IE. In addition, the published methods usually need you
to know the dimensions of the div you are centering, and I want a method
which centers both horizontally AND vertically, nomatter what size the
content.
It can be done by purely standards methods as follows:
<style type="text/css">
body, html {
margin : 0;
padding : 0;
height : 100%;
}
#layoutgrid{
display : table;
height : 100%;
width : 100%;
}
#layoutgridinner {
display : table-cell;
vertical-align : middle;
text-align : center;
}
-->
</style>
<body>
<div id="layoutgrid">
<div id="layoutgridinner" >
middle
</div>
</div>
</body>
But, Since IE doesn't support 'display table-cell' it will only work in
other standards browsers, like Firefox.
So, the only way I've found which is usable in the real world, uses a
single-cell
table, and so I use it with a clear conscience! :-) Here it is:
<style type="text/css">
/* Thanks to Rimantas Liubertas <[EMAIL PROTECTED]> for suggesting 'td'
*/
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 >
middle
</td>
</tr>
</table>
</body>
I believe that when the table-less approach fails (as it does here), it is
acceptable to use one, so long as it is minimal !
Not what you asked for, but I HTH.
Bob McClelland,
Cornwall (U.K.)
www.gwelanmor-internet.co.uk
----- Original Message -----
From: Joey
To: [email protected]
Sent: Monday, February 21, 2005 6:17 PM
Subject: [WSG] Centre DIV Vertically? Any compliant methods?
Hi Everyone,
I wondered if anyone has a solution on how to centre a DIV vertically. I
found this information, http://www.quirksmode.org/css/centering.html but its
uses a table. And I don't want to use a table as I am conforming to WAI AAA.
Anyone know any methods to centre vertically using standard code???
Cheers guys
Josef
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
