HTML and CSS Reference
In-Depth Information
Replace center with CSS
Change all center elements into div s or the equivalent semantic element; then apply the CSS text-align
property.
<h1><center>Martians Invade!</center></h1>
<h1 style="text-align: center">Martians Invade!</h1>
or
h1 {text-align: center; }
...
<h1>Martians Invade!</h1>
Motivation
XHTML strict does not allow the center element because centering is about appearance, not meaning. Centering
is not possible in non-GUI browsers such as Lynx or screen readers. It should be replaced by more descriptive
semantic markup.
Because centering is so purely presentational, it's often a candidate for style changes when a site is redesigned.
If the styles are extracted out into external CSS stylesheets, the updates associated with a redesign are much
simpler and faster to implement.
Potential Trade-offs
Very old browsers may not recognize the CSS rules, so a few details may not come across, but we're talking
truly ancient browsers here.
Mechanics
In CSS, centering is accomplished by the text-align property with the value center . You can apply this
property to all elements of a specific type. For instance, you can center all level 1 headings:
h1 {text-align: center; }
Or you can apply it to all elements of a specific class, such as booktitle :
*.booktitle {text-align: center; }
You also can center one specific element by referencing its ID:
*#bt1 { text-align: center; }
Search WWH ::




Custom Search