html - Center a stack of div's CSS -
html - Center a stack of div's CSS -
i trying stack div
on top of div
, center 2 div
s horizontally in page.
.sandbox{ position:relative; } .product-image, .option-image{ position:absolute; margin-left:auto; margin-right:auto; } .product-image{ z-index:-1; }
class="lang-html prettyprint-override"><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>
this stack part works fine can not seem them centered no mater try.
this should create them centered.
.product-image, .option-image{ position:absolute; margin-left:auto; margin-right:auto; left: 0; /*new*/ right: 0; /*new*/ }
demo: http://jsfiddle.net/hno8bxty/
html css centering
Comments
Post a Comment