CODEWITHSUNDEEP
htmlcsscentering
user3167249
user3167249

Reputation: 1102

Center a stack of div's CSS

I am trying to stack a div on top of a div and center those two divs horizontally in the page.

.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>

This stack part works fine but I can not seem to get them centered no mater what I try.

Upvotes: 3

Views: 3544

Answers (1)

Stickers
Stickers

Reputation: 78676

This should make 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/

Upvotes: 2

Related Questions