Re: Proposal: content-vertical-alignment

Mikko Rantalainen wrote:
> Lachlan Hunt wrote:
>> Just incase you, and anyone else, are unaware of this fact, vertical 
>> centering is already possible using at least 2 different methods that 
>> I know of (ignoring browser support issues).
>> Example 1:
>>
>> html {
>>    display: table;
>>    height: 100%; width: 100%;
>> }
>> body {
>>    display: table-cell;
>>    vertical-align: middle;
>> }
>> p {
>>    border: 1px dotted red;
>>    width: 5em;
>>    margin: 0 auto;
>> }
> 
> This requires TWO wrapping elements to center one element. No good.

No it doesn't, it's just easier.  I only used html and body in this 
example so I could set the height and width equal to the size of the 
viewport.

If, for example, the height and width were given in units other than 
percentages, then they could be set on the body element (the table-cell) 
and the content would still be centred within the box, and html wouldn't 
need styling.
eg.

body {
   display: table-cell;
   vertical-align: middle;
   height: 20em; width: 20em;
}

Additionally, the styles for both the body and html elements could be 
replaced with p::outside and p::outside(2), respectively, thus only 
requiring 1 element.  Although, the parent element(s) (or 
pseudo-elements) with one using 'display: table;' are not always 
required.  Here's one more method that only requires one element (note: 
using percentages for height and width doesn't work in this case):

p {
   display: table-cell;
   height: 20em; width: 20em;
   vertical-align: middle;
   text-align: center;
   border: 1px dotted red;
   margin: auto;
}

-- 
Lachlan Hunt
http://lachy.id.au/

Received on Friday, 10 June 2005 15:01:13 UTC