michaellunsford Posted September 4, 2006 Share Posted September 4, 2006 okay, it's centering horizontally -- why isn't it centering vertically?[code=php:0]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>untitled</title><style type="text/css"> html,body { height:101%; }</style></head><body><div style="margin:auto; width:481px; height:327px;"><img src="images/splash.jpg" alt="" width="481" height="327" border="0"></div></body></html>[/code]I've even tried writing a specific "auto" to each margin type (ie, left, right, top bottom). I've also tried giving it a height of 100% and a vertical-align:middle without success. The only thing that does work is making a table 100% high, and valigning a 100% high TD. This really seems like the long way around, though. What am I missing? Quote Link to comment https://forums.phpfreaks.com/topic/19711-vertical-center/ Share on other sites More sharing options...
Daniel0 Posted September 5, 2006 Share Posted September 5, 2006 http://www.cssplay.co.uk/ie/exampletwo.htmlIt only works in IE however. Quote Link to comment https://forums.phpfreaks.com/topic/19711-vertical-center/#findComment-86421 Share on other sites More sharing options...
michaellunsford Posted September 5, 2006 Author Share Posted September 5, 2006 hmm... I was really hoping for something that's cross-browser compatible. In fact, I thought my CSS was valid -- apparently I've missed something. Quote Link to comment https://forums.phpfreaks.com/topic/19711-vertical-center/#findComment-86572 Share on other sites More sharing options...
effigy Posted September 5, 2006 Share Posted September 5, 2006 You can try the negative margin trick:[code] div { position: absolute; top: 50%; left: 50%; height: 200px; width: 600px; margin: -100 -300; text-align: center; }[/code] Quote Link to comment https://forums.phpfreaks.com/topic/19711-vertical-center/#findComment-86591 Share on other sites More sharing options...
Daniel0 Posted September 6, 2006 Share Posted September 6, 2006 [quote author=effigy link=topic=106885.msg428651#msg428651 date=1157483067]You can try the negative margin trick:[code] div { position: absolute; top: 50%; left: 50%; height: 200px; width: 600px; margin: -100 -300; text-align: center; }[/code][/quote]Awesome! It works in both IE and Firefox. Quote Link to comment https://forums.phpfreaks.com/topic/19711-vertical-center/#findComment-87204 Share on other sites More sharing options...
michaellunsford Posted September 7, 2006 Author Share Posted September 7, 2006 Hmm... doesn't work in my default browser (Safari). It doesn't compensate for the height of the DIV, it just puts the top at the 50% mark. Quote Link to comment https://forums.phpfreaks.com/topic/19711-vertical-center/#findComment-87870 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.