center/shrink to fit redux.

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.

.

Relevant Pages

  • Re: center/shrink to fit redux.
    ... keep saying I should, but with all my books and searching on the web, I ... when users resize the window or fonts. ... fixed widths and horrible consequences on resizing fonts and windows. ... I know the width will change to fit the content if you float the block ...
    (alt.html)
  • Re: active window behind inactive, & other probs; font corruption?
    ... validate, remove duplicates, and deactivate a bunch of unneeded fonts. ... inserted and the note window has opened up for me to type in -- but I ... the only way to make Word register my typing again is to ...
    (microsoft.public.mac.office.word)
  • Re: For Ali et al
    ... it says that serif has default set so that visitors such ... the top edge of the box is 917 pixels below the top of the ... sizes and window width that WebPlus was using. ... particularly on Mac and Linux will be using different fonts; ...
    (uk.people.silversurfers)
  • Re: [SLE] Menu font for Firefox
    ... > a gtk app and obviously had the teeny fonts. ... >> For further screenshots, try to place the ... >> small window over a portion of a larger window then shoot the larger ... fonts through Gnome. ...
    (SuSE)
  • Re: F9 EeePC add/remove trouble
    ... easier to have the window fit the monitor. ... and s-c-d Settings tab doesn't even offer that. ... fonts on the gpk window; so I suppose that means changing fonts in some ... edge and move the keyhole around. ...
    (Fedora)