Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

center align website using css

Posted on 2010-09-17
4
Medium Priority
?
280 Views
Last Modified: 2012-05-10
I am having problems centering my website, i want to do it in CSS so it changes all the pages.

I used the following code below in my css, and upon saving i saw it take effect in dreamweaver and the page centered but on the browser it's still left aligned.
BODY {
	FONT-FAMILY: Tahoma, Arial, Verdana, sans-serif;
	FONT-SIZE: 11px;
	COLOR: #3B3B3B;
	background-image: url(i/tile.gif);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

Open in new window

0
Comment
Question by:newmie22
  • 2
  • 2
4 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 33704114
This is what I normally do and it's used on a lot of web sites.  Since the <body> is the whole screen, you can't use it to center your content in CSS.  Instead, most people add a 'wrapper' DIV around their entire content inside the body like below.  The fixed width and auto margins center that div inside the body.
body {
  margin: 0;
  color:#000000;
  background-color: #ffffff;
  }

#wrap {
  position:relative;
  width: 960px; 
  margin-left: auto; 
  margin-right: auto;
  } 

Open in new window

0
 

Author Comment

by:newmie22
ID: 33704145
Thanks for the advice.  When i try that the page now goes back to being left aligned in dreamweaver and is still left aligned in the browser
0
 

Author Closing Comment

by:newmie22
ID: 33704261
Nevermind, this worked! Forgive my stupidity i left off the ending div to wrap the site! Thank you.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 33704561
You're welcome!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question