我正在创建一个网站,需要两个图像叠加在一起,顶部图像居中,但我还需要整个块在页面中居,所以我不认为我可以使用绝对定位,因为我需要页面可扩展。
我正在使用 -
img.center { display: block; margin-left: auto; margin-right: auto; }
将图像居中显示在页面上。
我不确定我是否已经很好地解释了这一点,所以希望以下模型会有所帮助。
我已经浏览了图像覆盖,但它们似乎都使用绝对定位,我似乎无法使其工作,以便图像始终使用该方法居中。
有没有这样做?如果某些示例代码非常有用,或只是正确方向上的一点。
感谢。
答案 0 :(得分:2)
<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>
答案 1 :(得分:2)
您可以使用negative offset technique。
<div class="img_cont">
<img src="1.png" alt="" class="first"/>
<img src="2.png" alt="" class="second"/>
</div>
<style>
.first, .second{
margin:0 0 0 -200px; /* where 400px is width offset is / 2) */
position:absolute;top:0;left:50%;
}
.second{
margin:0 0 0 -100px; /* let's guess second image was 200px wide */
}
</style>
答案 2 :(得分:0)
<style type="text/css">
body {
margin: 0px;
}
.height-100vh {
height: 100vh;
}
.center-aligned {
display: box;
display: flex;
box-align: center;
align-items: center;
box-pack: center;
justify-content: center;
}
.background-image {
position: relative;
}
.text {
position: absolute;
}
</style>
&#13;
<div class="height-100vh center-aligned">
<img class="background-image" src="http://i.imgur.com/1aBfM.png" />
<img src="http://i.imgur.com/DH3Qw.png" class="text">
</div>
&#13;