centering a list with CSS

[Pierre Jelenc]

Is there a way to center (horizontally) a UL list of unknown width? I can
put it in a DIV that's centered with "margin-left: auto; margin-right:
auto;" but I then have to specify a width; otherwise the auto values get
set to 0 and there is no centering.

The list is generated dynamically, and there is no way to tell in advance
how long each item is going to be.

Alternatively, is there a good formula to determine with a reasonable
approximation the length in em units of a piece of text by summing up the
widths for the individual characters? (Obviously it would not work for
weird fonts, but are common fonts alike enough that the relative widths of
their letters make such a formula possible?)

Pierre
--
Pierre Jelenc | H o m e O f f i c e R e c o r d s
| * Ethan Lipton * Marwood * The Cucumbers *
T h e G i g o m e t e r | * Switchblade Kittens * Pawnshop *
www.thegigometer.com | www.homeofficerecords.com

[Christoph Paeper]

*Pierre Jelenc*:

Is there a way to center (horizontally) a UL list of unknown width? I can
put it in a DIV that's centered with "margin-left: auto; margin-right:
auto;"
What would that 'div' be there for?
but I then have to specify a width;
Maybe you can give 'min-width' andor 'max-width', which would result in a
calculatable width.
otherwise the auto values get set to 0 and there is no centering.
Hm, is an 'ul's really 100% wide by default or as much as its widest child?
If the latter, normal margin-centering should work AFAIK.
Alternatively, is there a good formula to determine with a reasonable
approximation the length in em units of a piece of text by summing up the
widths for the individual characters?

(number of chars)/(2+x)

x depends on the font, which you don't know, the language, the author's
style etc. It's usually somewhere between 0 and +1. That's of course still
very rough and there are also fonts out there where an 'x' is wider than
high.

--
"See... *That* is the problem... Scotch is for sipping, relaxing, and deep
thoughts... Jack is what you drink when you need to work through the pain."
John C. Welch

[Pierre Jelenc]

Christoph Paeper <cr*****@gmx.net> writes:

What would that 'div' be there for?
It would contain a centered title, and the centered "ul".
(number of chars)/(2+x)

x depends on the font, which you don't know, the language, the author's
style etc. It's usually somewhere between 0 and +1. That's of course still
very rough and there are also fonts out there where an 'x' is wider than
high.

Thanks, this may well be good enough for my purposes.

Pierre
--
Pierre Jelenc | H o m e O f f i c e R e c o r d s
| * Ethan Lipton * Marwood * The Cucumbers *
T h e G i g o m e t e r | * Switchblade Kittens * Pawnshop *
www.thegigometer.com | www.homeofficerecords.com

[Brian]

Christoph Paeper wrote:

Hm, is an 'ul's really 100% wide by default or as much as its
widest child?

block level, hence 100% wide

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Nick Theodorakis]

On Thu, 29 Jan 2004 06:30:43 +0000 (UTC), rc**@panix.com (Pierre
Jelenc) wrote:

Is there a way to center (horizontally) a UL list of unknown width? I can
put it in a DIV that's centered with "margin-left: auto; margin-right:
auto;" but I then have to specify a width; otherwise the auto values get
set to 0 and there is no centering.

If you want the list to "shrink-wrap" to the content and then be
horizontally centered, you can try:

ul
{
display: table;
margin-left: auto;
margin-right: auto;
}

It doesn't seem to work in IE5 (naturally). It works in Mozilla (1.4),
but it seems to lose the "bullets." Opera7.1 centers the list and
keeps the bullets.

Alternatively, if you just want the list centered with equal margins,
you can just specify the width of the margins; e.g.:

ul
{
margin-left: 25%;
margin-right: 25%;
}

will give you a horizontally centered list of 50% width. Content
longer than the container will wrap to the next line. This works in
about every browser I tried.

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Brian]

Nick Theodorakis wrote:

On Thu, 29 Jan 2004, rc**@panix.com (Pierre Jelenc) wrote:

Is there a way to center (horizontally) a UL list of unknown width?

If you want the list to "shrink-wrap" to the content and then be
horizontally centered, you can try:

ul
{
display: table;
margin-left: auto;
margin-right: auto;
}

It works in Mozilla (1.4),
but it seems to lose the "bullets." Opera7.1 centers the list and
keeps the bullets.

Strange, because the left padding/margin is still there. Putting the
ul in a div, and applying those styles to the div, works in both Moz
and Opera.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Nick Theodorakis]

On Sat, 31 Jan 2004 15:52:21 GMT, Brian
<us*****@julietremblay.com.invalid-remove-this-part> wrote:

Nick Theodorakis wrote:

ul
{
display: table;
margin-left: auto;
margin-right: auto;
}

It works in Mozilla (1.4),
but it seems to lose the "bullets." Opera7.1 centers the list and
keeps the bullets.

Strange, because the left padding/margin is still there. Putting the
ul in a div, and applying those styles to the div, works in both Moz
and Opera.

<shrug>

In my experience, browsers seem to get confused about the natural
locations of "bullets" in list elements, especially when they are
styled.

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Nick Theodorakis]

On Sat, 31 Jan 2004 15:52:21 GMT, Brian
<us*****@julietremblay.com.invalid-remove-this-part> wrote:

Nick Theodorakis wrote:

On Thu, 29 Jan 2004, rc**@panix.com (Pierre Jelenc) wrote:

[...]

ul
{
display: table;
margin-left: auto;
margin-right: auto;
}

It works in Mozilla (1.4),
but it seems to lose the "bullets." Opera7.1 centers the list and
keeps the bullets.

Strange, because the left padding/margin is still there. Putting the
ul in a div, and applying those styles to the div, works in both Moz
and Opera.

On second thought, maybe Mozilla figures that since tables don't have
bullets, then perhaps list elements shouldn't have them if they are
styled to display as tables?

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Karl Smith]

ni**************@hotmail.com (Nick Theodorakis) wrote:

ul
{
display: table;
margin-left: auto;
margin-right: auto;
}

It works in Mozilla (1.4),
but it seems to lose the "bullets." Opera7.1 centers the list and
keeps the bullets.

Strange, because the left padding/margin is still there. Putting the
ul in a div, and applying those styles to the div, works in both Moz
and Opera.

On second thought, maybe Mozilla figures that since tables don't have
bullets, then perhaps list elements shouldn't have them if they are
styled to display as tables?

That style is applied to the UL, not the LI which should be
unaffected. It could be another manifestation of the mozilla bug that
creates new boxes for generated content (the list marker box) outside
the original element's box instead of within it. If the LI's box and
the marker box were correctly created, it shouldn't be affected unless
the display property of the LI element was altered directly.

Explicitly setting the LI display and list-marker-position(?) (to
"inside") properties may help (unlikely).

--
Heard on television:
"...the government's plan to centralize development at both ends of
the reef..."

[Brian]

Nick Theodorakis wrote:

On Sat, 31 Jan 2004, Brian wrote:

Nick Theodorakis wrote:

ul
{
display: table;
margin-left: auto;
margin-right: auto;
}

It works in Mozilla (1.4),
but it seems to lose the "bullets." Opera7.1 centers the list and
keeps the bullets.

Strange, because the left padding/margin is still there. Putting the
ul in a div, and applying those styles to the div, works in both Moz
and Opera.

On second thought, maybe Mozilla figures that since tables don't have
bullets, then perhaps list elements shouldn't have them if they are
styled to display as tables?

I thought of that. But then why leave the space for the bullets there?

BTW, I tried adding display: list-item to the LI, no change. The only
way to center it as the op wants and keep the bullets is to put the UL
in a DIV. This also works in Opera. But then, I don't understand *why*
it works. The UL should take 100% of the width. The DIV wrapper, with
display: table, should take only the width it needs. However, since
its content require 100%, it should take 100%.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/