Spread the word

Wednesday, May 14, 2008

How to Center Align a Website or Html Element Without Align Tag

To position a website or a div tag or p tag in the center of the screen from Internet Explorer 4 and up including all modern browsers like Firefox, Opera, Netscape etc, we often use the align="center". Though this tag satisfies our aim and centers the element in the screen, but this tag is not recognized by W3 Validator as a valid XHTML content. Thats why if you are cautious enough about your website to be XHTML Validated, you can’t use it .



But websites positioned at the center of the screen always looks great and well-structured. The trick is to add some lines in your CSS. Just add text-align: center; to the body, this will make your website center aligned in Internet Explorer. Then add the usual margin: 0 auto; to the container selector which you want centered, this will make the element center aligned for all other browsers like Firefox, Opera, Mozilla, Netscape etc. Apply text-align: left; on the container to counter the center align for body. See the following example to make clear idea:

body {
text-align: center; /* Center align for IE */
}

.wrapper {
margin: 0 auto; /* Center align for Good browsers like Firefox, Opera, Netscape */
text-align: left;
width: 960px;
}

So now you can easily have center aligned website or elements, without violating any XHTML specification. Thus your website will look as cool as it is and you will also have the W3 Validated page Logo on your Website.

28 comments:

Anonymous said...

didnt work for me :(

Acmeous said...

Hi, though this is a well proven technique, I will like to know the problem that you faced here. If I can take a look at your site then I may help you with this.

Anonymous said...

thanks, it worked for me

Anonymous said...

I tried this a number of ways but it just doens't seem to work for me. I'm making a site for the books I'm writing and I want to center the whole site. I've inserted frames which I think is the problem but don't know how to get round them. I was wondering if you could take a look:
C:\Documents and Settings\Paige\My Documents\LM THE SITE!!! XD\index.html.html

Anonymous said...

Posted wrong thing, that's me above ^ XD. Try this: http://mutatio-archives.webs.com/

Anonymous said...

Hi,

I tried this and it worked to center my content but then the background image I had disappeared. Can you help?

justin said...

Hi,
I can't for the life of me get my page(s) to center--I've tried everything, but it just doesn't seem to work....I laid them out in Illustrator, and built them in DW, if that makes any difference.
If you can help me out, I'd be forever grateful!

http://saegusa.com/justin

Thanks!

Anonymous said...

worked great for me, thanks. i had spent a few hours scratching my head and messing with the code. Should have searched the net !

Titus said...

I'd love some help on this. I used the CSS code above, but my site still isn't centered. My URL is supportandpray.org.

Any help is appreciated. Thank you.

marc said...

super-solution, worked like a charm!

Anonymous said...

I am using Kompozer and insert the code but nuthing ever changes is a headache....where exatcly in the source code fo i insert it?

Anonymous said...

Do i insert it* my website is www.astromaher.com
Can sum1 help please

Anonymous said...

I'm just wondering if this technique only works for sites build in tables...

Anonymous said...

thaaaaanks!

Anonymous said...

I love you for this! <333333333333

alexanonymous said...

Worked well... working with magento i couldn't get it aligned... i tried everything but this worked globally, applying it to magento's stock css. thanks for the tip.

Anonymous said...

I'm using same trick in CSS but there's a bug that is driving me crazy. When I preview my website in browser (Safari or FF) pages which are determined by same css file are not positioned equally. Some pages are positioned more left then the others. Anyone knows why?

Anonymous said...

Thanks a lottttttttt! It works for me! :)

Anonymous said...

That's great :) My webpage does center, just not all of the content in the div tags. I've tried almost any suggestion out there, and I bet I'm overlooking something stupid

Vegan said...

THANKS!!!

Anonymous said...

Developing my first web site.. Thank you so much for this - it worked!

Anonymous said...

Hello,

Does this method work when you using frames?

Or

Would it be better to put everything inside a table?

I haven't tried this yet but i will tonight!

Thanks.

Kabiee said...

Hello there,

I have designed a website for my friend using photoshop to create the layout.
I have then used dreamweaver to add in links and make webworthy.

I have one problem which is:

whenever you view the website online the whole thing is left aligned.

I have looked through a few forums, tried and tested what experts have said thus adding in code, but still my site refuses to be centered.

Here's the address to my site :

www.novelmagazine.co.uk

I hope you can help me,

Kab

Anonymous said...

so simple so good and I'm so stupid that did not thinking in that way

Anonymous said...

thats works THUMBS UP

Anonymous said...

Worked for me perfectly after 30 min. of trying. I merely goofed on the different naming conventions I was using and their coinciding info. Hurray!

Anonymous said...

thanx man. you have helped a lot

ramsan kristan said...

Thank you......

Post a Comment