Tuesday, September 13, 2005

text-align: center and Mozilla

Taken from here, it explains how to get div boxes to center correctly on Mozilla based browsers.

Basically, here is what you need to do for a style to work:

  • Add margin-left: auto;
  • Add margin-right: auto;
  • Set it's width: ###; to less than the screen size, such as something like 95%, 75%, etc

An exact quote:
text-align: center; centers inline content within a block. It does not (and should not) center the block box itself. A block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block.