2008-06-02

CSS: Centre aligning

If you want to have a fixed width layout blog site, and the content floated in the middle of the screen. You may also use the following CSS command:

#content-wrapper
{
width: 660px;
margin: 0 auto
}

Normally, you would then enclose <div id="content-wrapper"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, thus placing in the centre of the screen.

Bear in mind, the above solution doesn't work in IE, as these browsers won't centre align the element with this CSS command. You'll need to change the CSS rules:

body
{
text-align: center
}

#content-wrapper
{
text-align: justify;
width: 660px;
margin: 0 auto
}

But then, it'll also centre align the text as well. To offset unnecessary changes to the texts, I inserted text-align: justify into the content div.

0 comments:

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L