Most HTML and xHTML web pages is using CSS (Cascading Style Sheet) to describe format and layout the presentation semantics. In web programming, the <div> tag is used to define a division or a section in a HTML document, and is commonly been used to group block-elements to format them with styles.

Before various stricter HTML and xHTML standards been recommended, webmasters can easily center a part of web page or image with a simple coding such as:

<div align="center">"This line of text will be centered</div>

However, in web browsers such as Firefox and Flock or websites which adhere to stricter standards such as xHTML 1.0 Strict, align=”center” will be ignored, as align attribute has deprecated in preference of styles attribute instead. For text only, align attribute can be substituted with text-align tag as a workaround, but for image or other elements, it will continue to align to the left, and not center.

To follow strict web coding standard, in order to center a block-type object within another block type object, use the following code on the object that wants to be centered (i.e. on the inner object):

style=”margin-left:auto; margin-right:auto; text-align:center;”

or,

style=”margin:0 auto; text-align:center;”

text-align attribute is optional, and is included to ensure the centering of text or object is done correctly on all web browser, and to provide best compatibility. For example, when enclosed in DIV tag, the HTML code will look like below:

<div style="margin:0 auto; text-align:center;">This line of text will be centered</div>

Related Posts