Question

我正在使用以下代码：

<html>
<body bgcolor="black">
<center>
<div style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div>
</center>
</html>

适用于Chrome，但不适用于IE或Firefox。我的目标是覆盖cover.png over decline.png，这样人们就无法直接保存图像，而是保存透明的png。我更喜欢这样做而不使用外部CSS。谢谢你的帮助。：）

Answer 1

css中的标准方法是使用margin: 0 auto，所以：

<div style="width: 1080px; height: 288px; margin: 0 auto; position: relative">
   <img ... >
   <img ... >
</div>

请注意添加position: relative。没有它，您的图像将相对于<body>元素绝对定位。另请注意，任何对HTML和/或基本浏览器开发工具的访问权限最少的人都可以绕过这些类型的叠加。

Answer 2

- 避免使用旧标签，例如使用CSS。 - 使用适当的DOCTYPE（下面的示例显示了html5的doctype） - 始终关闭您的代码，您的代码没有正文的结束标记。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="main" style="width:1080px;height:288px;">
        <img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
        <img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
    </div><!-- end div main -->
</body>
</html>

CSS：

#main{
    margin: 0 auto;
    width:1080px;
   height:288px; 
}

你如何在Firefox和IE中居中div？

2 个答案: