gpt4 book ai didi

javascript - 如何将用 Javascript 创建的图像居中?

转载 作者:太空宇宙 更新时间:2023-11-03 21:38:26 25 4
gpt4 key购买 nike

我有这个非常简单的代码,问题是它在使用 Firefox 和 IE 时不提供相同的输出:在 Firefox 中,图像叠加但右对齐,而在 IE 中它们叠加并左对齐。我想要的是图像将居中并叠加。我必须使用 Javascript 创建图像才能在创建图像时使用特殊的库。

感谢您的帮助。

HTML

<body>
<div id="Container">
<script type="text/javascript">
document.write('<img id="image1" src="image1.jpg">')
document.write('<img id="image1" src="image2.jpg">')
</script>
</div>
</body>

CSS

body {
text-align: center;
background-color: #e8e6e7;
margin-left: auto;
margin-right: auto;
}
#Container {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image1 {
position : absolute;
margin-left: auto;
margin-right: auto;
}
#image2 {
position : absolute;
margin-left: auto;
margin-right: auto;
}

最佳答案

由于您正在使 #image1#image2 绝对定位,因此它们不会调整 #Container 的宽度/高度。这意味着你不能将它居中,因为它没有居中的比例。

下面的代码使只有一个图像被绝对定位。这可以让您的其他图像按预期运行。您可以使用“叠加”图像做任何您想做的事情。

我还包含了 z-index,它可以让您更改图像的顺序。对于此示例,这不是必需的,但如果您添加更多图像,它可能会有用。

HTML

<div id="Container">
<div class="image-wrap">
<img id="image1" src="http://dummyimage.com/200x200/fa00fa/fff.png"/>
<img id="image2" src="http://dummyimage.com/200x200/00ff33/000000.png"/>
</div>
</div>

CSS

#Container .image-wrap {
position: relative;
display: inline-block;
}
#image1 {
position : relative;
z-index: 10;
}
#image2 {
position : absolute; /* Different than #image1 */
z-index: 20; /* On top of #image2 */
top: 0;
left: 0;
/* Assuming width/height of both images are the same */
}

JS fiddle

http://jsfiddle.net/n496j/1/

关于javascript - 如何将用 Javascript 创建的图像居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25147447/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com