WooCommerce单一产品图像没有集中

Question

我有三列布局，其中一个就像 -

<div class="column one-second product_image_wrapper">

  <div class="images">

      <div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
        <div class="image_wrapper">
          <a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
            <div class="mask">
            </div>
            <img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
          </a>
          <div class="image_links">
            <a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
              <i class="icon-search">
              </i>
            </a>
          </div>
        </div>
      </div>


  </div>
</div>

我想将这个图像垂直和水平居中，目前它看起来像这样 -

有人可以告诉你怎么做吗？

Answer 1

假设您希望将其放在相对于具有类image_frame的div的中心位置，则以下代码将起作用。

.image_frame{
  position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}


.image_frame img{
  position:absolute;
  top:50%;
  left:50%;//brings the edge of image to exact center both horizontally and vertically
  margin-top:-125px;
  margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}