html - 绝对定位在wordpress中不起作用

Question

我试图让这段文字进入图片。出于某种原因，当我将它添加到 WordPress 时它不起作用。似乎在我附在下面的 JS fiddle 中工作正常。任何帮助将不胜感激。 Screenshot of what's happening on WP

https://jsfiddle.net/tdh3euue/

<div class="outer-wrapper">

<img class="aligncenter wp-image-1015" 
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p>

</div>
</div>

.outer-wrapper {
position: relative;
}

.text-wrapper {
 position: absolute;
 left: 35px;
 top: 35px;
 color: white;
 font-size: 52px;
 font-weight: bold;  
}

Answer 1

从你的图片来看，我认为你的中心对齐到外包装，这就是文本移动的原因。

我在这里使用 left: calc((100% - 750px)/2 + 35px); 因为你的 img 宽度固定为 750px，所以我使用那个 calc 将正确的左边设置为 35px img 的左边缘。

同时使用 @media (max-width: 750px) 如果屏幕小于 750px，calc 将返回小于 35px 的值，我们不希望这样，这个媒体如果屏幕宽度小于 750px，查询将帮助您将左边设置为 35px。

.outer-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.text-wrapper {
  position: absolute;
  left: calc((100% - 750px)/2 + 35px);
  top: 10px;
  color: white;
  font-size: 52px;
  font-weight: bold;
}

@media (max-width: 750px) {
  .text-wrapper {
    left: 35px;
  }
}

<div class="outer-wrapper">

  <img class="aligncenter wp-image-1015" src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-matched-betting-1.jpg" alt="" width="750" height="431" />
  <div class="text-wrapper">
    <p>What is matched</p>
    <p>betting?</p>

  </div>
</div>