Posted by Ed Mullen on 06/01/06 17:34

fred.haab@gmail.com wrote:
> 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.
>

I'm sure there's something horribly wrong with this but I tried it real
fast just as an exercise. http://edmullen.net/temp/test2.html. It does
validate, for what that's worth. I've shrunk the window, blown up and
reduced the text, etc. and it seems to work well in Mozilla and IE. the
worst thing that seems to happen is that the placement of the TITLE will
shift noticeably right when the text is absurdly enlarged in Mozilla.
There's probably some way to overcome that but nothing occurred to me in
the brief time I spent on this.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
How come abbreviated is such a long word?

[Back to original message]