图像叠加垂直居中按钮

我试图添加图像叠加按钮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

图像叠加垂直居中按钮

回答

相关问题