圖像疊加垂直居中按鈕

我試圖添加圖像疊加按鈕WooCommerce產品頁面，所以一切工作在桌面模式很好，但它是不負責的原因主要圖像尺寸是百分比，所以我想使其負責，圖像疊加垂直居中按鈕

檢查截圖它的外觀在移動和桌面如下：

enter image description here

這裏是CSS

.media { 
    display: inline-block; 
    position: relative; 
    vertical-align: top; 
    width: 100%; 
    height: auto; 
} 

.media__image { display: block; } 

.media__body { 
    background: #000; 
    bottom: 0; 
    color: white; 
    font-size: 1em; 
    left: 0; 
    opacity: 0; 
    overflow: hidden; 

    position: absolute; 
    text-align: center; 
    top: 0; 
    right: 0; 
    -webkit-transition: 0.6s; 
    transition: 0.6s; 
} 



.media__body:hover { opacity: 0.7; } 


.media_bodyline { 

        width:0%; 
        margin:15px auto; 
        background-color:#ffffff; 
        -webkit-transition: all 500ms ease-out; 
        -moz-transition: all 500ms ease-out; 
        -o-transition: all 500ms ease-out; 
        transition: all 500ms ease-out;  

} 
.media__body:hover .media_bodyline { 
        width:60%; 

} 


.media__body:hover:after, 
.media__body:hover:before { 
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
} 
.buyicon { 
height:42px!important; 
width:42px!important; 
display: inline!important; 
} 
.media__body div { padding-bottom: 10px !important; } 

.media__body p { margin-bottom: 1.5em; } 
.media__mid { 
width: 100%; 
height: 50%; 
top: 30%; 
margin: 0px auto; 
position: relative;}

和HTML

<div class="media"><a href="<?php the_permalink(); ?>"> 

      <?php 
       /** 
       * woocommerce_before_shop_loop_item_title hook 
       * 
       * @hooked woocommerce_show_product_loop_sale_flash - 10 
       * @hooked woocommerce_template_loop_product_thumbnail - 10 
       */ 
       do_action('woocommerce_before_shop_loop_item_title'); 
      ?> 

     </a> 
    <div class="media__body"> 
    <div class="media__mid"> 
    <div><a href="<?php the_permalink(); ?>"><img class="buyicon" src="/wp-content/uploads/2015/06/link-details.png" ></a></div> 
    <hr class="media_bodyline"></hr> 
    <div><?php do_action('woocommerce_after_shop_loop_item'); ?></div> 
    </div> 
</div> 
</div>![enter image description here][1]

來源

2015-06-19 Rafayel

指定問題中該按鈕的類或ID – 2015-06-19 18:05:41

如果要居中的東西，其容器的大小可能會改變，我建議用jQuery做。

function centerItem(){ 
    var imgHeight = $(your_image_identifier).height(); 
    var halfImgHeight = imgHeight/2; 
    $(your_button_identifier).css("top", halfImgHeight+"px"); 
} 
window.onload = centerItem;

如果你想在中心精確地對準它，你應該這樣來做：

function centerItem(){ 
    var imgHeight = $(your_image_identifier).height(); 
    var halfImgHeight = imgHeight/2-(HALF OF YOUR BUTTON HEIGHT); 
    $(your_button_identifier).css("top", halfImgHeight+"px"); 
} 
window.onload = centerItem;

我希望這可以幫助你。

編輯：也許你也想把這個函數綁定到onresize事件。

$('body').onresize = centerItem;

來源

2015-06-19 18:16:59

當我看到人們使用JavaScript進行佈局，我總是畏縮。雖然它可能沒有很好的支持，但flexbox幾乎是你正在尋找的東西。只要谷歌它，網上有很多好東西。

來源

2015-06-22 12:10:32

圖像疊加垂直居中按鈕

回答

相關問題