Center contents of webpage

Question

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.

Cᴏʀʏ · Answer 1 · 2016-10-02T16:19:26.107

11

<html>
<head>
<style type="text/css">

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.

edited Oct 02 '16 at 16:19

answered May 19 '09 at 12:09

Cᴏʀʏ

105,112
20
162
194

1

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 May 19 '09 at 12: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. – Cᴏʀʏ May 19 '09 at 19:10
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 May 20 '09 at 11:15
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 May 20 '09 at 11:21
1

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. – Cᴏʀʏ May 20 '09 at 16:59
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 May 22 '09 at 12:55
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. – Cᴏʀʏ May 22 '09 at 13:09

score 3 · Answer 2 · answered May 19 '09 at 12:09

3

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

answered May 19 '09 at 12:09

Glen

21,816
3
61
76

score 2 · Answer 3 · answered May 19 '09 at 12:08

2

#wrapper {
    width: 800px;
    margin: 0 auto; 
 }

<div id="wrapper">
     <p>This will appear in a centered container</p>
</div>

answered May 19 '09 at 12:08

janhartmann

14,713
15
82
138

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 Dungs May 19 '09 at 16:35
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; } – janhartmann May 19 '09 at 17:40
Alright - maybe it will not center in IE5 - but hell, whos using that anyway? :-) – janhartmann May 19 '09 at 18:04

score 1 · Answer 4 · answered May 19 '09 at 12:09

1

I believe this might help you.

answered May 19 '09 at 12:09

George Stocker

57,289
29
176
237

RichieHindle · Answer 5 · 2009-05-19T12:15:55.613

0

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.)

edited May 19 '09 at 12:15

answered May 19 '09 at 12:09

RichieHindle

272,464
47
358
399

...Except most versions of IE don't know what 'max-width' is. – Cᴏʀʏ May 19 '09 at 19:12
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 May 19 '09 at 19:41

score 0 · Answer 6 · answered May 19 '09 at 12:09

0

try

#div {
  margin:0 auto
};

answered May 19 '09 at 12:09

Dasha Salo

5,159
5
26
28

score 0 · Answer 7 · answered May 19 '09 at 12:10

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;
}

Center contents of webpage

7 Answers7

Linked

Related