Welcome to WebmasterWorld Guest from 174.129.135.89

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



Give them each a width and margin:0 auto;
7:31 pm on Nov 4, 2005 (gmt 0)

5+ Year Member



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.
7:52 pm on Nov 4, 2005 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

5+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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