W3C home > Mailing lists > Public > www-style@w3.org > February 2004

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

From: Ian Hickson <ian@hixie.ch>
Date: Sun, 15 Feb 2004 21:57:43 +0000 (UTC)
To: Vincent Starre <thebitman@comcast.net>
Cc: "www-style@w3.org" <www-style@w3.org>
Message-ID: <Pine.LNX.4.58.0402152153580.21142@dhalsim.dreamhost.com>

On Mon, 26 Jan 2004, Vincent Starre wrote:
>> 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?

No; see section 10.1 of CSS2.1 for a description of containing blocks.

> 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.

Yes, this is what position:center would do (well, technically it would
change 'top' and 'bottom' not 'margin-top' and 'margin-bottom' but the end
result is the same).

> It seems from what you have linked that the horizontal-position would be
> centered if any horizontal margin is set to "auto".

No, you have to set both left and right margins to auto to horizontally
center it. To right align, set left to auto, and to left align, set right
right auto.

> 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?

Or position:relative, yes. Any element can be made position:relative,
though, so this shouldn't be a hindrance.

> - 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)

If you want it left aligned but vertically centered, you would say:

 div {
   position: center;
   left: 0;

Ian Hickson                                      )\._.,--....,'``.    fL
U+1047E                                         /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'
Received on Sunday, 15 February 2004 16:57:45 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:11 UTC