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 https://forums.phpfreaks.com/topic/191675-how-to-center-a-box-bang-on-in-the-middle-of-the-screen/ 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 https://forums.phpfreaks.com/topic/191675-how-to-center-a-box-bang-on-in-the-middle-of-the-screen/#findComment-1010495 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 https://forums.phpfreaks.com/topic/191675-how-to-center-a-box-bang-on-in-the-middle-of-the-screen/#findComment-1010745 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 https://forums.phpfreaks.com/topic/191675-how-to-center-a-box-bang-on-in-the-middle-of-the-screen/#findComment-1010746 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 https://forums.phpfreaks.com/topic/191675-how-to-center-a-box-bang-on-in-the-middle-of-the-screen/#findComment-1010756 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.