Div Vertical Align

Hi,

Does anyone know a good way to center content vertically within a div? e.g. vertical align... Also having it browser compliant and if possible making it validate... now there's a big ask!

 

You're gonna to have problems cross browser with it right now. vertical-align support is buggy at best.

 

this way i do it is putting the content in its own div and using 'top' and margins in css...... ill give you an example.

#contentdiv {
position:relative;
height:60px; ----- must be defined
width:auto;
top:50%;
margin-top:-30px; -------- value must be half the height (and negative)
}

 

If you google absolute center you find mny tutorials.

 

If say I need to vertically align text in a menu bar that has a height of 40px; i'll just set a line-height to 40px also. It looks Ok until you rezise the text then you can notice the bug. But its worked alright for me in the past.

 

that works well and i do that too - but it only when its one line of text you are wanting to center

more than one line and that code doesnt work out well

 

Vertical align, except in tables, refers to the positioning of inline nodes in the inline box. Line height refers to the leading applied to an inline element. Neither are appropriate for aligning block elements vertically.

See vertically centering content in a div with css for an example. The demo includes the hacks necessary for IE. IE simply does not support css2 worth a damn, and hacks are required.

cheers,

gary

 

It works well but doesnt support IE7, I found a hack that gets around IE7, it doesnt validate, but you cant have it every way!

 

Interesting.

I have not seen the # filter before. Can you explain it?

Further, you have an incomplete DTD, forcing quirks mode. In quirks, IE7 is pretty much the same as IE6 in quirks. And, that's a Bad Thing®. Is quirks a requirement?

cheers,

gary

 

If you know how many pixels the element you are valigning into is you could use this.

position:absolute;
top:400px; /* half the height of the containing element */
margin-top:-100px; /* half the height of the element you are aligning */