[ToolmakerSteve.com banner TBD]


Width-Only Centering of UL + Floated LIs, Using CSS

 

With some work, it is possible to center anything using CSS. No need to specify dimensions of the inner box.
If you only need to center width, the CSS used in this page is simpler than the CSS that can handle both width and height centering. Yet it is non-trivial: most available sample code either specifies width, or breaks down on the case I show here. Or do what I prefer to do: use a table.
This demonstrates all the features that I am aware might be an issue. It is the hardest case: a floated sequence of sub-elements, and a color shrink-wrapped to the main element.

VERSION: checking that this works when wrapped around sequence of floated divs (LI's in a UL).

CAUTION: do NOT attempt to set "width" on "center" --
valid CSS agent will then expand inner cell to match -- contents will end up at left edge.
If need a fixed width, wrap inside another div & set the width on that new wrapper.
NOTE: ul color vanishes, use ".shrinkwrap" color to shrink-wrap ul. [Here, the dark green color that pads the link bar.]
IE NOTE: If only need horiz-center (e.g. a horiz navbar), then THIS approach is good.
However it is incompatible with the "position: absolute" of previous vertical approach --
see "D" for a more complex solution that can handle vert + horiz even with floated divs as content.