I want to "centerize" the text and contents of my webpage. Now I don't want to align the text to center, I still want a left alignment but I want significant margins on the left and right so that everything looks relatively center-ish. Can you show me the HTML/CSS to achieve this? THanks.
+2
A:
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
meep
2009-05-19 12:08:41
In some browsers, like IE for example, this will not work. You will have to add another div wrapping #wrapper that sets text-align to center. In #wrapper you should then set text-align to left again.
Kevin D.
2009-05-19 16:35:10
I have never experienced that problem? I have used that bit of code on every webpage I have made. With XHTML doctype. If you see: http://dev.korebogen.dk - Its centered in all browsers. And the CSS is only #wrapper { width: 960px; margin: 0 auto; }
meep
2009-05-19 17:40:53
Alright - maybe it will not center in IE5 - but hell, whos using that anyway? :-)
meep
2009-05-19 18:04:23
A:
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
And in the HTML, wrap everything in:
<div id='container'>
...
</div>
(Note that this answer differs from meep's in that I'm using max-width to give a fluid layout below 800 pixels, whereas he's using width to give a fixed layout.)
RichieHindle
2009-05-19 12:09:25
IE7 and above do. For IE6, here's an excellent article on how to achieve the same thing: http://javascript.about.com/library/blwidth.htm
RichieHindle
2009-05-19 19:41:42
+2
A:
Create 3 columns on your page. All your text goes in the center column and can be left alligned.
Have a look here for examples http://matthewjamestaylor.com/blog/perfect-3-column.htm
Glen
2009-05-19 12:09:37
+8
A:
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
*UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.
Cory Larson
2009-05-19 12:09:42
It's better to put the text-align: center; on another containing div in case you're using a WYSIWYG editor that will center all your text in the editor.
Steve Perks
2009-05-19 12:41:41
+1 because I agree -- I was just giving the simplest example I could for the asker, but in reality I would do exactly as you suggest.
Cory Larson
2009-05-19 19:10:01
This works well, but there is a slight problem. I've applied it across all my pages and it seems that for some pages they move slightly to the left/right. This is distracting when my menubar is moving from page to page.
alamodey
2009-05-20 11:15:44
It seems like the pages with contents/text that can fill the width of the page will have a center that is more "left" than other pages that are almost empty.
alamodey
2009-05-20 11:21:56
Does it seem like about 30 pixels shift? Could be because of the scrollbar appearing and disappearing in FF when the content stretches beyond the page.
Cory Larson
2009-05-20 16:59:48
Yes, that's what it is! Is there a way of correcting that? In other words set my page to start at a certain number of pixels from the left of the screen (regardless of whether or not there is a scrollbar).
alamodey
2009-05-22 12:55:32
I updated my answer. Note that IE always shows the scrollbar's trackbar so there's no shift, so this fix is ONLY for FF, and I only tested it in 3.0.
Cory Larson
2009-05-22 13:09:30
A:
Have a container div within which you put all your content:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Then add some css specifying the width and margins of your container div:
#container {
width: 750px;
margin: 0 auto;
}
Tomas Lycken
2009-05-19 12:10:21