homepage Welcome to WebmasterWorld Guest from 23.20.91.134
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to center a <div> box using CSS?
ngentot




msg:1194123
 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.

 

MozMan




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

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

photon




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

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.

ngentot




msg:1194126
 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?

gohankid77




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

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

ngentot




msg:1194128
 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.)

createErrorMsg




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

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

gohankid77




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

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.

chunk_split




msg:1194131
 10:05 am on Oct 9, 2004 (gmt 0)

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.

photon




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

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.

createErrorMsg




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

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

photon




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved