Re: position: center (Was: valign=center-style alignment in CSS3?)

On Mon, 26 Jan 2004 14:24:42 +0000 (UTC), Ian Hickson <> wrote:

> On Sun, 25 Jan 2004, Vincent Starre wrote:
>> what would position:center be relative to?
> The containing block, as with position:absolute (see CSS2.1 section 
> 10.1).
> Here is an updated version of the position:center proposal. Comments
> welcome.
> position: center
> ----------------
> The containing block for a position:center element is the same as for
> a position:absolute element.

That is to say, you could only use position:center on something which was 
absolutely positioned?
What I'm saying is that something is needed which can, no matter what the 
containing block, cause the top and bottom paddings or margins to always 
be equal, even if the text within is smaller than the forced-height of the 
object. This is comes in handy the most when you are dealing with a 
limitted amount of space and don't know with certainty to font or 
font-size which will be used.
What you sent me deals a lot with horizontal centering, but when I am 
talking about is vertical-centering regaurdless of the horizontal 
position. (what I was trying to accomplish when I was reminded of the lack 
of vertical-centering was actually a vertically and right-aligned heading)
Point being, text-align:center; aligns based on the parent-element, 
whereas vertical-align:middle; aligns based on other in-line objects 
within the same parent element. This is fine, has its place, but an 
equivilent of text-align:center; does not seem to exist for vertical 
It seems from what you have linked that the horizontal-position would be 
centered if any horizontal margin is set to "auto". Because of this, 
coupled with a browser's tendency to favor the left-margin when viewing 
ltr text, how would one manage right-aligned text? If I were to set the 
right-margin and call tell the left margin to be "auto", the text would 
become centered, would it not?
Currently (in CSS2) it is possible to emulate vertical-alignment on a 
single line of text, as follows:

<span>text text text text</span><span style="vertical-align:middle; 
height:100%; width:1px; background-color:transparent;"></span>

But this will only work on a single line of text, as 
vertical-align:middle; is an in-line function.
It may be that what you refrenced would handle all of this, but I am 
unclear about two things in particular:
- Would this only work relative to ancestors which are absolutely (or 
position:center) positioned?
- What if you want to align only half of what position:center does- either 
just-horizontal or just-vertical? If text is too short to reach both 
margins supplied, an ltr browser will tend to favor the top-left margin, 
treating the right and bottom margins as "auto" (regaurding text, that is)

Vincent Starre

Received on Monday, 26 January 2004 13:55:04 UTC