Welcome to WebmasterWorld Guest from 54.167.86.132

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)

New User

10+ Year Member

joined:Oct 29, 2005
posts:11
votes: 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 :)

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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

New User

10+ Year Member

joined:Oct 29, 2005
posts:11
votes: 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.
7:52 pm on Nov 4, 2005 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4986
votes: 12


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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).

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

New User

10+ Year Member

joined:Sept 26, 2005
posts:11
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 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

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

Inactive Member
Account Expired

 
 


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members