HTML center Tag

By Stephen Bucaro

The HTML <center> tag is used to center an element on the webpage. An example of use of the center tag is shown below:

<center>This text is centered</center>

The example below shows the center tag being used to center a span element:

<center><span>This span element is centered</span></center>

The example below shows the center tag being used to center a table:

<center><table border="1">
<tr><td>Cell A1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table></center>

The center tag is deprecated, which means it may not be supported in future browsers. I personally think it is a handy tag that is in very common use on the web and so will be supported for a long time into the future. However to play it safe you may prefer to use the align attribute as shown below:

<table align="center" border="1">
<tr><td>Cell B1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

The prefered way to define visual layout today is to use style rules. The example below shows the table being centered the W3C standards way, by using style to set its margin property to auto.

Cell C1	Cell 2
Cell 3	Cell 4

<table style="margin:auto;" border="1">
<tr><td>Cell C1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

However, if you're using Internet Explorer you'll note that this does not center the table. This is because the margin property set to auto does not work in Internet Explorer. However, placing the table in a <div> container and setting the div's text-align property to center as shown below will center the table in the Internet Explorer and Firefox browsers.

<div style="text-align:center;">
<table  style="margin:auto;" border="1">
<tr><td>Cell D1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
</div>

A few tips: If you are attempting to center a table you need to understand the difference between block elements and inline elements. Block elements, like the table, have a built-in cariage-return and line-feed before and after the element. Which means you will not be able to place text or other elements on either side if the table.

Inline elements do not have a built-in cariage-return and line-feed, but instead flow into position with other elements on the webpage. You can change a block element into an inline element by setting its display property to inline. However, then, if the user can resize the page, the table will flow to a different position.

In order to position a table you may also need to understand the difference between relative positioning and absolute positioning. HTML elements use relative positioning, which means that they are positioned relative to other elements in their containing element. By setting an elements position property to absolute, you can define exactly where the element will appear on the webpage. However absolute positioned elements are on their own separate layer, meaning they may overlap other elements on the webpage.

Throw in the border, padding, and margin properties (which by the way work differently in IE and FF) and you can see why it is so difficult to lay out a web page exactly the way you want it, and why WYSIWYG web design tools don't work.

More HTML Code:
• HTML5 Slider Control
• Line Break Basics
• Providing Alternate and Title Text for an Image
• HTML SPAN Basics
• HTML Frames Basics
• Webpage DOCTYPE Declarations Explained
• Web Color Names Table
• Form Input Labels
• HTML Linking Basics
• HTML5 Input Type - Email

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues