Вертикально центральные кнопки на накладываемом изображение

Question

Я пытаюсь добавить кнопки на накладываемом изображение в страницы WooCommerce, так все работают отлично в режиме рабочего стола, но это не отвечает причина основного размера изображения с процентами, так что я хочу сделать его ответственным,

Проверьте скриншот, как это выглядит на мобильных и настольных ниже:

здесь 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] 

Answer 1

Если вы хотите что-то центр, размер которого контейнера может измениться, я предлагаю сделать это с 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; 

Я надеюсь, что это поможет вам.

EDIT: Возможно, вы также захотите связать эту функцию с событием onresize.

$('body').onresize = centerItem;

Answer 2

Я всегда передергивает, когда я вижу, что люди используют JavaScript для разметки. Хотя это может и не иметь большой поддержки, Flexbox почти наверняка то, что вы ищете. Просто google это, есть много хороших онлайн онлайн.