我正在创建一个网站,并且需要两个图像相互叠加,顶部图像居中放置,但是我也需要将整个块都放置在页面中居中放置,所以我认为我不能使用绝对定位需要页面可缩放。
我在用 -
img.center { display: block; margin-left: auto; margin-right: auto; }
使图像在页面上居中。
我不确定我是否已经很好地解释了这一点,因此希望以下模型能够有所帮助。
我已经研究过图像叠加,但是它们似乎都使用绝对定位,因此我似乎无法使其正常工作,因此始终使用该方法将图像居中。
反正有这样做吗?如果某些示例代码会非常有帮助,或者只是朝着正确方向迈出了一步。
谢谢。
最佳答案
<div class="img_cont">
<img src="1.png" alt="" class="first"/>
<img src="2.png" alt="" class="second"/>
</div>
<style type="text/css">
div {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
}
.first {
width: 100%;
height: 100%;
}
.second {
position: absolute;
}
</style>
<script type="text/javascript">
$(".home_click").css("left", ($(".img_cont").width() - $(".second").width()) / 2 + "px");
$(".home_click").css("top", ($(".img_cont").height() - $(".second").height()) / 2 + "px");
</script>