Six Ways to Center an Element on a Webpage
By Stephen Bucaro
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.
<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 1 | Cell 2 |
| Cell 3 | Cell 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>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
