Home/ Questions/Q 377447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T14:41:51+00:00

I’m trying to get some HTML pages to be more compliant and am starting

  • 0

I’m trying to get some HTML pages to be more compliant and am starting off with simple stuff like removing align=”center” in tables, etc.

However, I can’t seem to get the effect I want using CSS. Stuff I’ve tried include

text-align:middle
vertical-align:middle

and the most suggested by designer friends

margin-left:auto; margin-right:auto; width: 100px

But under certain layouts or certain browsers (especially IE6) none seem to work. Is there a reliable way to do this using purely CSS and get it to work on most browsers?

EDIT:
I meant text-align: center;. Typed it in a rush. The page already has a DOCTYPE but I’m not sure if it’s appropriate.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s:

    text-align: center;

    for horizontal centering but:

    vertical-align: middle;

    for vertical centering but vertical centering this way will pretty much only work with table cells. To get cross-browser vertical centering without using tables look at Vertical Centering in CSS (yes it’s non-trivial).

    Note: text-align: middle and vertical-align: center are incorrect values.

    To horizontally center a block element, the usual trick is:

    <div id="outer">
  <div id="inner">Some test...</div>
</div>

    with:

    #outer { width: 600px; }
#inner { width: 300px; margin: 0 auto; border: 1px solid black; }

    Bear in mind, that this won’t necessarily work with certain versions of IE in the euphemistic “quirks” mode. It’s a good practice to force IE into (also euphemistic) “standards compliant” mode by using a DOCTYPE at the top of your document.

    • 0