I’m almost embarrassed to ask help with this. It’s not like I’ve never done this before – with the exact code I’m using now!
For the life of me, I can’t understand why the content of a new page won’t center in the browser window.
The HTML I have is this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="mainContainer">
Main Content Goes Here
</div>
</body>
</html>
And this is the CSS:
body { background-color: #EDEDC7; }
#mainContainer {
width: 1000px;
margin: 0 auto; }
What’s happening is the text is being positioned about 1/3 of the way from the left edge of whatever browser window I view the page in. I know the stylesheet is “being found” by the web page because the background color is working.
I’ve checked it in FF8, IE9, Chrome, Safari 5, the latest versions of Opera and Dragon – even FF, Safari and Chrome on Mac! Okay – a little obsessive, I know, but I’m stumped as to why it won’t center. So what the heck am I missing here? (Probably some stupid little thing I’m forgetting, too…)
It is working, the problem is that your text is not centered. If you add text align center to it it will work the way you are expecting.
example: