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

Six Ways to Center an Element on a Webpage

Unfortunately, even in this modern age, webpage layout is not what it should be. Visual webpage layout tools don't always cooperate, and they add tons of unnecessary tags, so when you go to debug the code, it's much too difficult. And one of the most difficult things to control is the centering of elements on a webpage. In this article, I'll show you six different ways to center a webpage element on a webpage.

The first way to center a webpage element is to use the html center tag. Several notes about the center tag;

1. It's a block element, which means it has an embedded carriage return and line feed before and after the tag. So you can't put text or other elements to the left or right of the centered element.

2. The center tag is deprecated, which means future web browsers may not support it. I think it will remain supported long into the future, but if you use it, be sure your webpage uses DOCTYPE tranitional.

Shown below is code for use of the center tag.

Use of center tag
<center><img src="earth.jpg" /></center>

The second way to center a webpage element is to nest the element inside a div element and apply the align="center" attribute to the div. Again, a div is a block element, so it's difficult to put text or other elements to the left or right of the centered element. And the align attribute is also depricated, so be sure to use DOCTYPE transitional.

Shown below is code for use of the div tag with align="center" attribute.

<div align="center"><img src="earth.jpg" /></div>

The W3C ( World Wide Web Consortium) deprecated the center tag and align attribute because they prefer you to use CSS (Cascading Style Sheets) rules to layout your webpage. So, the third way to center a webpage element is to nest the element inside a div with the div's CSS text-align property set to center. Again, a div is a block element, so it's difficult to put text or other elements to the left or right of the centered element.

Shown below is code for use of the div tag with its CSS text-align property set to center.

<div style="text-align:center;"><img src="earth.jpg" /></div>

The W3C prefers that you to use CSS rules to layout your webpage. If the webpage element that you want to center is a table, then you can use CSS to set the table's margin property to auto. A table is a block element, so it's difficult to put text or other elements to the left or right of the centered element. Also Internet Explorer doesn't know what to do with margin:auto;.

Shown below is code for centering a table using the CSS margin property set to auto.

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

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

WordPress Security

90% of business websites have been hacked in the last 12 months. This ebook gives you a complete checklist of things you can do to secure your website without hiring a pricey web developer.

Reader John M Stokes says, "This book is a great resource for security on Wordpress and also does it very quick without having to be a long and boring. Truly worth getting to make sure your Wordpress site is as safe as possible. Click here for more information.

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