我正在创建一个网站,并且需要两个图像相互叠加,顶部图像居中放置,但是我也需要将整个块都放置在页面中居中放置,所以我认为我不能使用绝对定位需要页面可缩放。

我在用 -

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>

07-24 09:49
查看更多