Previous Message
Next Message

What's the proper way to vertically center an element within its parent?

Sent by Ed Seehouse on 5 March 2007 19:07


On 3/4/07, Chris Chen [EMAIL-REMOVED]> wrote:
> >The modern way to do this, since a menu (even a horizontal one) is
> >just a list of links, is to use the UL element as the wrapper.  The
> >anchors then go in the LI elements within.  See for example the> >Listamatic site at
http://css.maxdesign.com.au/listamatic/
>
> COOL! I am happily switching <ul> + inline :-).

Actually in many if not most cases it's better to float the LI
elements left rather than make them inline.  It allows many more
styling options and is more flexible, but the CSS is more complex.

> One caveat is that inlined
> <li> introduced an unknown fixed padding that I have to compensate for via
> experiment (since I need to center the list in the middle). This is IE7.

Yes, this is well known and does add some minor complexity, but to the
CSS rather than the HTML.
The problem is not with the LI elements however, but with the UL
itslef, which the standard suggest have an indent placed on it.

Just set border-left and padding-left to 0, or one of them to zero and
the other to any indent you want.

Simplest for a horizontal list is

> ul
> { padding-left 0; margin-left 0;}

You have to do both because while most browsers use the one, IE uses
the other.  This is perfectly within the CSS standard so it isn't an
IE "bug", just an allowed difference.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: