Question

我正在尝试在 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]

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;

我希望这会对你有所帮助。

编辑：也许您还想将此函数绑定到onresize事件。

$('body').onresize = centerItem;

Answer 2

当我看到人们使用javascript进行布局时，我总是畏缩不前。虽然它可能没有很大的支持，但flexbox几乎肯定是你想要的。只是google它，网上有很多好的东西。

图像覆盖上的垂直中心按钮

2 个答案: