我的覆盖没有被居中使用css

<head> 
<title>Overlay test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
#overlay { 
    position: absolute; 
    background-color: #ccffcc; 
    display: none; 
    height: 200px; 
    margin: 0 auto; 
    width: 200px; 
} 
</style> 
<script type="text/javascript"> 
//<![CDATA[ 
function hide() { 
    document.getElementById("overlay").style.display = "none"; 
} 

function show() { 
    document.getElementById("overlay").style.display = "block"; 
} 
//]]> 
</script>

所以当用户点击它时，运行show（）将css框置于顶部。不过，我希望它在浏览器中居中。我已经设置了边距：0 auto;这应该做的伎俩不应该呢？我的覆盖没有被居中使用css

我只是试图创建一个叠加功能，而不使用jQuery，因为它似乎与我的学校cms模板不兼容。

感谢

来源

2010-08-06 Adam

保证金：0汽车将不会在位置的绝对要素工作，他们在自己的小世界中存在，正常流程之外。所以为了解决这个问题，你需要做一个额外的步骤。 CSS dead centre technique将在这里工作。

来源

2010-08-06 14:32:19 dmp

+1或者只是不要使用绝对。 – sworoc 2010-08-06 14:35:04

绝对没有错，它是拉出一些设计的唯一方式，但必须尊重它不是正常的流程。 – dmp 2010-08-06 14:36:27

感谢伟大的工程... 任何人都知道，如果我的技术将轻松纳入swfobject闪光灯内置？ – Adam 2010-08-06 14:46:55

尝试设置叠加层上的顶部和左侧属性。

来源

2010-08-06 14:32:23

使用％设置顶部和左侧位置。设置CSS属性顶部：10％;剩40％;

来源

2010-08-06 15:30:24

我的覆盖没有被居中使用css

回答

相关问题