如何在 Firefox 和 IE 中将 div 居中?

发布于 2024-12-11 02:37:05 字数 600 浏览 1 评论 0原文

我正在使用以下代码:

<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 覆盖到 returned.png 上,这样人们就不能直接保存图像,而是保存透明的 png。我更喜欢在不使用外部 CSS 的情况下执行此操作。感谢您的帮助。 :)

I'm using the following code:

<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>

It works in Chrome but not in IE or Firefox. My goal with this is to overlay cover.png over declined.png so people cannot directly save the image, but instead save a transparent png. I prefer to do this without using external CSS. Thanks for your help. :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

心如荒岛 2024-12-18 02:37:06

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

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

注意添加position:relative。如果没有它,您的图像将绝对相对于 元素定位自己。另请注意,任何对 HTML 稍有了解和/或访问基本浏览器开发工具的人都可以轻松绕过这些类型的覆盖。

The standard method in css is to use margin: 0 auto, so:

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

Note the addition of position: relative. Without that, your images would position themselves absolutely relative to the <body> element. Also note that these sorts of overlays are trivial to bypass by anyone with the slightest knowledge of HTML and/or access to basic browser developer tools.

卷耳 2024-12-18 02:37:06

- 避免使用旧标签,例如使用 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; 
}

-Avoid using old tags such as instead use CSS.
-Use appropriate DOCTYPE (example below shows doctype for html5)
-Always close your tags, your code does not have closing tags for body.

<!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; 
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文