Centralising a DIV element

Hi all,

How do I write up CSS to centralise a DIV element within the browser window?

The DIV element is to remain centralised even when the browser is shrunk or enlarged.

Cheers

Tryst

Hi,

The usual way to centre is to use margin-left:auto and margin-right:auto on the div. However , you will also need to supply a width for the element otherwise it will not centre.

You will also need the text-align:center hack for ie5. Ie5 and 5.5. doesn’t understand that margin:auto should centre an element with a specified width. Fortunately it also gets wrong the fact that text-align:center is only supposed to centre text and images and not nested elements. Therefore we can use the text-align:center in a parent div and it will centre nested elements for ie5 and ie 5.5. Other browsers will just get centred text which we can put right in the element itself.


body {
text-align: center;/* hack for ie5*/
margin: 0px;
padding: 0px;
}
.central {
margin-right: auto;/*centres in compliant browsers*/
margin-left: auto;/* "	" */
width: 755px;
text-align: left;
}

And then after the body tag :


<div class="central"> 
The centred content (or even the rest of your page)
</div>

I’ve put the hack for ie5 (text-align:center) in the body tag which saves a div. I’ve also set the central class to text-align:left to counteract the effects of the previous hack.

You can centre the whole page if you nest it inside this element. You will need to give the central style a position:relative if you have absolutely placed elements in your page that you want to scale accordingly.

Paul

Horizontally, vertically, or both?

Rik

Will text-align:center in the body tag apply to all Divs/elements contained within it. For example,

<Body>
<div>
<div>
content etc
<div>
Content etc
</div>
</div>
</div>

…will the text-align:center apply to the 2nd set of nested div tags?

Also, referring back to my post on another thread, why have you used the following, top:50%; margin-top:-200px; to centralise the ‘inner’ div, when U could have done what U have mentioned above?

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-image: url(“images/black_grey_tv2.gif”);
text-align:center;
}
#container {
width:750px;
margin:auto;
height:100%;
text-align:left;
}
body>#container {border:1px solid transparent;}
#inner {
position:absolute;
width:750px;
height:400px;
top:50%;
margin-top:-200px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #000000;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-right-width: 4px;
border-right-style: solid;
border-right-color: #000000;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #000000;
}

Cheers

Tryst (still learning :))

that’s why I asked “horizontally, vertically, or both?”

Paul’s excelent explanation above is how you center a div in the horizontal plain. Left and right margins will be the same.

From what I can see, the other thread deals with making a div ‘dead centre’, horizontally and vertically. Follow these links:

Rik

Right, understood :slight_smile:

There never seems to be a simple solution in web design. There always must be work arounds to actually achieve the desired results.

Oh yeah, before I go, what exactly does this CSS attribute do?

display: block

Cheers Zoef and Paul.

Tryst

Oh yeah, before I go, what exactly does this CSS attribute do?

display: block

display:block causes an element to generate a block level box. This means that an inline element such as a span can be turned into a block level element similar to a div. It will behave just like a block level element and cause following content to drop to a new line (if used statically).

It is most used for the <a> element to generate the background rollover. Without it the <a> element only stretches as far as the text because you cannot set a width on inline elements (except in ie in quirks mode). If you set the <a> element to display block then you can set width, height and padding correctly.

diplay:inline has the opposite effect and will turn an block level element such as a div into inline content and allow them to be side by side as though they were inline. It will not generate a lline-feed as a normal block element would.

There never seems to be a simple solution in web design. There always must be work arounds to actually achieve the desired results.

While that is true some of the time due to the browsers quirks/bugs a lot of the time it is down to misunderstanding how the css is supposed to work.

Horizontal centering is straight forward: You give your element a width and then let margin:auto take care of the centering.

Vertical centering would be easy if IE understood display:table-cell which would then allow you to use vertical-align:middle. Mozilla is fine with this but IE doesn’t understand it unfortunately. Which is why we resort to the top:50% and negative margin fix.

There is a lot to take in initially with css but it starts to make sense after a while :).

Paul

Thanks, I didn’t know this. Now I can go ahead and make them work proper :smiley:

Almost sounds like real life :eek:.

Rik