Orionsbelter Posted February 10, 2010 Share Posted February 10, 2010 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=60); } .white_content { display: none; position: absolute; z-index:1002; overflow: auto; color: #FFF; font: Verdana, Geneva, sans-serif; font-size: 14px; } </style> </head> <body> <script type="text/javascript"> window.onload = function() { document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; }; </script> <div id="light" class="white_content"><div align="right"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/Login/cross.png" alt="Close" title="Close" height="20" width="20"/></a></div><div align="center"> <div style="background-image: url(../images/BGs/lightBoxTop.gif); width:604px; height:20px;"> </div> <div style="background-image: url(../images/BGs/lightBoxMain.gif); width:604px;"> Hello </div> <div style="background-image: url(../images/BGs/lightBoxBot.gif); width:604px; height:20px;"> </div> </div></div> <div id="fade" class="black_overlay"></div> </body> </html> I NEED THE LIGHTBOX TO CENTER IN THE MIDDLE OF THE SCREEN. Can anyone help me please, thank you for reading Quote Link to comment Share on other sites More sharing options...
haku Posted February 11, 2010 Share Posted February 11, 2010 You can only vertically center an object using CSS if it has a fixed height: HTML: <div id="black_overlay"> <div id="white_content">Some data</div> </div> CSS: #black_overlay { position:fixed; height:100%; width:100%; background-color:black; } #white_content { height:200px; width:200px; position:relative; top:50%; margin:-100px auto 0; background-color:white; } Something like that. Going off the top of my head, so you may have to play with it a bit. Quote Link to comment Share on other sites More sharing options...
ignace Posted February 11, 2010 Share Posted February 11, 2010 Take a look at: http://www.wpdfd.com/editorial/thebox/deadcentre4.html Quote Link to comment Share on other sites More sharing options...
Zane Posted February 11, 2010 Share Posted February 11, 2010 could you not just set the div's margin to margin: 50% auto; Quote Link to comment Share on other sites More sharing options...
ignace Posted February 11, 2010 Share Posted February 11, 2010 No this will only center it horizontally and he probably also wants it vertically centered Quote Link to comment 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.