我正在尝试将div
堆叠在div
之上,并在页面中水平居中这两个div
。
.sandBox{
position:relative;
}
.product-image, .option-image{
position:absolute;
margin-left:auto;
margin-right:auto;
}
.product-image{
z-index:-1;
}
<div class="sandBox">
<div class="product-image">
<img src="main-product-image.jpg" width="1440" height="560" alt=""/>
</div>
<div class="option-image">
<img src="overlay.png" width="1440" height="560" alt=""/>
</div>
</div>
这个堆叠部分工作正常,但我似乎无法让它们集中在我的尝试中。
答案 0 :(得分:2)
这应该使它们居中。
.product-image, .option-image{
position:absolute;
margin-left:auto;
margin-right:auto;
left: 0; /*NEW*/
right: 0; /*NEW*/
}