Posted by fred.haab@gmail.com on 06/01/06 15:56

So I'm anally trying to avoid tables, like all the "good" developers
keep saying I should, but with all my books and searching on the web, I
simply can't figure out a way to center an <ul> without using a table.

So the "requirement" is that the UL block itself is centered AS A
WHOLE. The actualy content within the block should be left aligned
(the bullets should line up). The title I have above the UL is pretty
short - and should also be left aligned (but I could live with it
centered over the list). So it's something basic like this:

<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>

Problems with CSS:

1. <ul> width is, without specifically setting it, 100%. So is the
width of a DIV. So you can't use margin: auto auto.

2. I want the <ul> to be exactly centered, so if I use a % or a fixed
width, the <ul> will lean towards the left unless I space it exactly
perfectly... but we wouldn't want to do that because it would "break"
when users resize the window or fonts.

In other words, if there were only some way to have a block shrink to
fit the content (like a table data would do), then you could set the
margins to auto and have it centered and still not be restricted to
fixed widths and horrible consequences on resizing fonts and windows.
Obviously, even with a centered table, someone can do something extreme
(extra-extra huge fonts that in no way can look "right"), but someone
should theoretically be able to increase the font size without changing
the width of the window up until the width of the window is filled with
the longest line of the centered list, and even then it will wrap the
<li> and not necessarily look bad. Of course, at some point you just
have to say it's unreasonable to make it look good (like someone
shrinking a window to 100x100 and saying your site doesn't scale well).

I know the width will change to fit the content if you float the block
(ie float: left), but then how do you center it?

Shouldn't there be a "float: center"?

Thanks.

[Back to original message]