Question

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

<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来将正确的左边设置为img左边缘的35px。

如果屏幕小于750px，并且calc会返回小于35px的值，也使用@media (max-width: 750px)，我们不希望如此，此媒体查询将帮助您将左侧设置为35px如果屏幕宽度小于750px。

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

绝对定位不适用于wordpress

1 个答案: