homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Very simple question of how to align DIV in the center of the screen
dangerx




msg:1196614
 7:01 pm on Nov 4, 2005 (gmt 0)

Hi guys,

Pleaser advise on the simple question for a newbie.
I need to align three DIVs boxes one after each other at the center of the screen. I cannt find a CSS tag for that...!?
How do you do that?

I have basically three linkable categories and I want them to be aligned at the center. I set up a 3 CSS CLASSES for these three categories and the CSS looks like this:

.cat1{
text-align: center;
padding: 0;
margin: 4px;
color: black;
background: yellow;
display: inline;
}

.cat2{
text-align: center;
padding: 0;
text-decoration:none;
margin: 4px;
color: black;
background: green;
display: inline;
}

.cat3{
text-align: center;
padding: 0;
text-decoration:none;
margin: 4px;
color: black;
background: blue;
display: inline;
}

So, the DIVs are displayed in a row, but at the left of the screen, whereas I want them to be relatively at the center...

Please, help :)

 

Robin_reala




msg:1196615
 7:17 pm on Nov 4, 2005 (gmt 0)

Give them each a width and margin:0 auto;

dangerx




msg:1196616
 7:31 pm on Nov 4, 2005 (gmt 0)

yep, thanks for reply, but this just remove the margin between the categories, but does not centers it?
Or maybe I misunderstood here something?
Thanks.

Fotiman




msg:1196617
 7:52 pm on Nov 4, 2005 (gmt 0)

Try this:

<body>
<div class="cat1">
...
</div>

<div class="cat2">
...
</div>

<div class="cat3">
...
</div>
</body>

Then your styles:

.body
{
text-align: center;
}
.cat1, .cat2, .cat3
{
margin: 0 auto;
width: 770px;
}

Robin_reala




msg:1196618
 8:07 pm on Nov 4, 2005 (gmt 0)

Oops, I meant:

margin: 4px auto;

That should center them once you give each box a width smaller than the screen. If it's not then you're probably using IE5 or IE6 in quirks mode. Make sure you've got a full doctype on the page (and nothing above it).

temporaris




msg:1196619
 8:47 pm on Nov 4, 2005 (gmt 0)

Greate guys, I appreciate your help,
It was very simple, I just had to set my page to:
page {
text-align: center;
}

But thanks really a lot for advises,
chears,
Al.

createErrorMsg




msg:1196620
 10:07 pm on Nov 4, 2005 (gmt 0)

page {
text-align: center;
}

Be aware that this centering method works only in old versions of IE (5.0, 5.5) and does not have the effect you want in any modern, standards-compliant browser. It works in legacy IE versions because the old IE engine mistakenly applied text-align properties to block level elements. This was and is a spec violation (text-align is supposed to effect the inline content of block level elements, not the block level element itself) and is fixed in IE6/StandardsMode. If the page has a valid doctype, IE6 will not center using this method. Decent browsers won't center with this no matter what you do.

The proper standards-compliant centering method is the auto-margin ttechnique describe dby several posters above. it requires that the element being centered has an explicit width and an auto value for the left and right margins.

When used in conjunction with the IE text-align thing (which must be set on the parent of the element being centered) you have a cross-browser centered page. With only one or the other, there is a hole in the layout's implementation.

In the interest of completeness, here's another option for centering.

Set the element being centered to position:absolute. Give the element a left:50% and then a negative margin at half of it's explicit width. This moves it halfway across the parent element, then drags it back to the left by half it's width, centering it in the element...

html:
<body>
<div id='wrapper'></div>
</body>

css:
#wrapper{
width:500px;
position:absolute;
left:50%;
maring-left:-250px;
}

Note that if you need the element centered in a parent that is NOT the body element, you'll need to set that parent to position:relative.

cEM

matzan




msg:1196621
 12:06 am on Nov 12, 2005 (gmt 0)

I just looked at your code for aligning the div in the center, i think that should be

margin-left: -250;
...not...
maring-left: -250;

a very useful piece of code. I have been looking for something like this for months.

-=MZ

createErrorMsg




msg:1196622
 3:59 am on Nov 12, 2005 (gmt 0)

Of course. Typos notwithstanding, it's a reliable technique. Thanks for catching that.

Note that the unit (px, in this case) is necessary to get FF to apply the 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