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