Question

我正在使用Wordpress并为WooCommerce安装了一个插件，可以为产品图片创建缩放窗口。但是，我无法让缩放窗口显示在原始产品图像的顶部。代码如下所示：

<div class="yith_magnifier_zoom_wrap">
<a class="yith_magnifier_zoom woocommerce-main-image" title="orange-slices" itemprop="image" href="orange-slices.jpg">
    <img class="attachment-shop_single wp-post-image" width="300" height="300" alt="orange-slices" src="orange-slices.jpg">
</a>
<div class="yith_magnifier_mousetrap" style="width: 100%; height: 100%; top: 0px; left: 0px; cursor: pointer;"></div>
<div class="yith_magnifier_zoom_magnifier" style="left: 0px; top: 0px; width: 300px; height: 300px; background-repeat: no-repeat; background-image: url('orange-slices.jpg'); display: block; background-position: -7px -7px;"></div>

您可以在此处查看问题：WooCommerce product page

我尝试将缩放窗口div .yith_magnifier_zoom_magnifier居中对齐在图像div .yith_magnifier_mousetrap的顶部。我设法relative并使用margin:0 auto;设法使其居中，但它现在直接显示在产品图片下方。

不幸的是，主题和插件应用了各种内联规则，因此我需要覆盖它，但我还需要保持解决方案的响应性，因为产品图像高度可能会有所不同。任何建议都会非常受欢迎。三江源。

Answer 1

#include <iostream>
#include <string>
#include "DVD.h"

int main()
{
     std::ifstream input_file("filename.txt");
     DVD cInception;
     cInception.SetInfo(input_file);

     DVD cFightClub;
     cFightClub.SetInfo(input_file);

     DVD cPulpFiction;
     cPulpFiction.SetInfo(input_file);

     DVD cTheDarkKnight;
     cTheDarkKnight.SetInfo(input_file);

     DVD cAmericanHustle;
     cAmericanHustle.SetInfo(input_file);

     DVD cSilverLiningsPlaybook;
     cSilverLiningsPlaybook.SetInfo(input_file);

     DVD cTheHungerGames;
     cTheHungerGames.SetInfo(input_file);

     DVD cFurious7;
     cFurious7.SetInfo(input_file);

     DVD cSavingPrivateRyan;
     cSavingPrivateRyan.SetInfo(input_file);

     DVD cGladiator;
     cGladiator.SetInfo(input_file);

     //Print out DVD Info

     cInception.Print();
     cFightClub.Print();
     cPulpFiction.Print();
     cTheDarkKnight.Print();
     cAmericanHustle.Print();
     cSilverLiningsPlaybook.Print();
     cTheHungerGames.Print();
     cFurious7.Print();
     cSavingPrivateRyan.Print();
     cGladiator.Print();

     return 0; // fix return statement member
}

我认为这是你想要实现的目标？

修改

.yith_magnifier_mousetrap { top:-366px!important; }

Answer 2

通过这种方式，您不需要任何幻数（例如CSS中的特定像素大小）：

.yith_magnifier_zoom_magnifier {
  position: absolute !important;
  margin: 0 auto !important;
  left: 0;
  right: 0;
}

直接在兄弟div的顶部叠加div

2 个答案: