[ToolmakerSteve.com banner TBD]


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 width and height centering (within the gray box). The only change from the width-only version, is the addition of a height on CSS for ".centerit table".

Even in this era of CSS, it is appropriate to use a table for this purpose. Otherwise, you would need some tricky CSS, and some extra HTML, as demonstrated here. At least until the day when all browsers are fully compliant with modern CSS guidelines. And it is wise to support the main browsers that have been in use for the past two or three years. The main concern is when IE 6's usage becomes minimal.

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.]