[ToolmakerSteve.com banner TBD]


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

  • One
  • Two Long With Spaces
  • Three Okay
 

It is easy to center anything using a table. No need to specify dimensions of the inner box. This version shows horizontal-only centering (within the gray box). For vertical also, see here. Even in this era of CSS, it is appropriate to use a table for this purpose.

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 ".centered" color to shrink-wrap ul. [Here, the green color that surrounds the 3 boxes.]
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.