CSS Vertical
- Started
- Last post
- 11 Responses
- nosaj
Any suggestions on verically centering a div in a browser? I don't want to set the hieght of the container div, I'm hoping that as the browser resizes, the content div with center itself.
- billl0
requires a little js
http://www.alistapart.com/d/foot…
- Stugoo0
does it have to be a particular width?
#page_content{
width: 1000px;
left: 50%;
top: 0;
position: absolute;
margin-left: -500px;
margin-top: 0;
padding: 0;
}just make sure the margin is half of the width.
- heavyt0
This is a little trickier if you have a variable height div.
I have done it before, basically, you need to use JS to get the offsetHeight of the DIV, then do the math and set the top margin. You will need to call that fcn onload and also onresize.
- nosaj0
thanks all - great links.
- FallowDeer0
margin:0 auto;
?????
- stewart0
needs some js indeed.
it's 1999 code, but maybe it's what you're looking for
http://www.derijn.nl/
- myobie0
If only browsers supported css3 stuff, it's really easy.
iIf you got a div in the body, it would be:
body { display: table; }
div { display: table-cell; vertical-align: middle; }It might be possible to get away with:
If only browsers supported css3 stuff, it's really easy.
iIf you got a div in the body, it would be:
html { display: table; }
body { display: table-cell; vertical-align: middle; }Something like that will work in FF and Safari. Sometimes I use it and then I just put margin-top: 100px or use js for IE.
Sucks man. We need some forward movement on the css front.
- rafalski0
If CSS was designed by people who actually make websites there would be:
body {vertical-align:middle}
..in the first place. For any block element, without pretending it's a table.
- kerus0
i cheat, i use a table.
sometimes its a lot more efficient to use a sloppy bit of code and hope no one notices.
- OnePixelSolid0
- This is the best method I have come across, have been using it for some time now.dcconz