|
 Centering with CSS
added on the Jan 4, 2005
For reasons I don't quite understand, the wizards at the W3C created a special CSS attribute for vertical alignment (vertical-align), but did not create a similar one for horizontal alignment. Instead, there are some other ways to achieve the desired horizonal alignment including the float attribute and the method I am about to show you.
The best way to center some element (I'll be centering a div) is to first set the the text-align attribute of the element directly outside your new element to center. So, if you want to center a huge div containing all the content of a web page, set the body selector to text-align center like this:
body { text-align: center; }
Then, in the defintion of a selector (could be a class or id - I chose to do an id since I only need to center one element), set the margin attribute to auto, like so:
#center_me { margin: auto; }
So, now if you were to implement the following markup in an web page:
<body>
<div id="center_me">This content will be centered</div>
</body>
you will get a center aligned div.
There you go. That's all there is to it.
Tutorial provided by Spoono.com
|
