It has been a frequent practice (there will be a future post with statistics) to use the HTML tag <center> to center-align its contents. However, the <center> tag has been deprecated by the W3C because of its lack of flexibility and inconsistent treatment by different browsers.
If you want XHTML validation and compliance (and you already know XHTML validation is important because you read the post DOCTYPE Validation in XHTML/ASP.NET web pages how should you convert the tag to a supported syntax without affecting the rendering of the page?
There are 2 scenarios depending on the contents that are being centered.
The first scenario is when the centered elements are simply text elements and inline elements (eg.: img, span, em, strong, i, b, ...). In this case the <center> tag needs to be replaced by a <div> tag with the attribute style="text-align:center".
For example if you have the following code:
... <center> This text is centered! </center> ...
should be converted to:
... <div style="text-align:center"> This text is centered! </div> ...
The second scenario is when the centered elements are block elements (eg.: address, blockquote, div, fieldset, headings, hr, lists, p, pre, table, ...). In this case if there is a combination of inline elements with block elements, the <center> tag also needs to be replaced by a div tag. Additionally it is necessary to add the following CSS attribute to each nested block element: margin-left:auto;margin-righ:auto.
Let's see an example:
...
<center>
<span>This text is centered! </span>
<table>
<tr>
<td>This text is also centered!</td>
</tr>
</table>
</center>
...
should be converted to:
...
<div style="text-align:center">
<span>This text is centered! </span>
<table style="margin-left:auto;margin-right:auto">
<tr>
<td>This text is also centered!</td>
</tr>
</table>
</div>
...
The convertion is simple but tedious specially when there is a combination of centered elements.
