Welcome to WebmasterWorld Guest from 54.145.209.34

Forum Moderators: not2easy

How to center a <div> box using CSS?

   
7:01 pm on Oct 8, 2004 (gmt 0)



The way I know is by adding align=center like this:

<div align=center>

But I want to put the center property inside a style class, like this:

<div class=center_box>

But I don't know what to put in the center_box style.

Can anyone help? Thanks.

7:04 pm on Oct 8, 2004 (gmt 0)

10+ Year Member



If I'm not misaken (My CSS skills are shaky, at best) you should be able to do something like this in your style sheet:

.center_box
{
align: center;
}

-Moz

7:28 pm on Oct 8, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



align:center;
works on the children of that element, so it won't center the div itself, it'll center everything inside of it.

If you use

.center_box {margin:0 auto;}
in the div, it will center it in virtually every browser except one--guess which one? To center it in IE use the
align:center;
on a containing div.
7:49 pm on Oct 8, 2004 (gmt 0)



It's not working.

This is what I did

.outermost_body{width:750px;height:500px;background:white;padding:5px;align:center;margin:0 auto;}

<div class=outermost_body>

It still doesn't center the box.

Any idea?

7:57 pm on Oct 8, 2004 (gmt 0)

10+ Year Member



Try this:

body {
text-align: center;
}

.outermost_body {
text-align: left;
width: 750px;
height: 500px;
background: white;
padding: 5px;
margin: 0 auto;
}

In the place of "body", put the parent element of ".outermost_body" (unless "body" is the parent element).

8:06 pm on Oct 8, 2004 (gmt 0)



Hey it works!

I put text-align:center;margin:0 auto; into the body:

body{padding:0;margin:0;background: gray url(image/bg.gif);text-align:center;margin:0 auto;}

Thank you!

(But this also means the same thing that you cannot center the div itself. You can only center it from the parent, which in this case is the <body> tag.)

8:25 pm on Oct 8, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



.outermost_body{width:750px;height:500px;background:white;padding:5px;align:center;margin:0 auto;}

Should be text-align: center;

You can only center it from the parent, which in this case is the <body> tag

Right. Even in cases where text-align: center works, it works to center the children of the element with that value. In the case of a block element containing only text, the child that gets centered is the inline text itself, but really you're NEVER actually centering the element itself.

For example, if you apply text-align: center; to a <p> element, the paragraph block itself doesn't move, since a block element by definition fills the width of it's container. Instead, the block stays the same, and the text inside of the <p> block get centered.

8:28 pm on Oct 8, 2004 (gmt 0)

10+ Year Member



Internet Explorer misinterprets the 'text-align' property by centering the all of the child elements rather than just the inline elements. To correct it, you put "text-align: left" in the element that should be centered to fix IE's bug.
I'm fairly positive that "margin: 0 auto" should go in the element that should be centered. It requires a width to work, however.
10:05 am on Oct 9, 2004 (gmt 0)

10+ Year Member



you can centre a DIV horizontally by:

body {
margin: 0px 20px 0px 20px;
}

#box {
width: 700px;
height: 400px;
margin: 0px auto -1px auto;
}

Vertical centre alignment is a totally different ball game.

6:19 pm on Oct 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Should be text-align: center;

Yes, of course, my bad. I must have hit a bad sector when I was typing that.

Sorry about that.

7:44 pm on Oct 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



lol!

photon, my quote pulled "align:center" from ngentot's post. I hadn't even noticed it in yours until you pointed it out! :)

although now that I see it I must say I'm rather disappointed... ;)

12:39 am on Oct 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Rats! I shouldn't have said anything, and perhaps no one would have been the wiser! :)

One other method that no one has mentioned yet is the negative margin ploy. Set the left side of your div at 50% and then set a negative margin half the width of your div. So if your div is 750px wide, your CSS would look like


#center_div
{width:750px;
left:50%;
margin-left:-375px;
}

I'm not sure why anyone would prefer that method over the others; I'm just presenting it as another alternative.

Double-check my code, cEM.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month