The HTML center tag is used to center an element on the webpage The center tag is deprecated, which means it may not be supported in future browsers. The prefered way to define visual layout today is to use style rules.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

HTML center Tag

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

This text is centered
<center>This text is centered</center>

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

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

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

Cell A1Cell 2
Cell 3Cell 4
<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 C1Cell 2
Cell 3Cell 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.

Cell D1Cell 2
Cell 3Cell 4
<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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268