html - 在 div 上定位文本

Question

我试图将文本放置在响应式 div/图像上的不同位置(左上、中上、右上、左下、中下、右下)。宽度是响应式的。

这是一个 fiddle 示例:https://jsfiddle.net/Fawn721/os01fnmt/

.img-wrapper {
  position: relative;
  display: inline-block;
}

.img-wrapper .overlay-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center
}

.img-wrapper .overlay-text p {
  position: absolute
}

.img-wrapper .overlay-text p.center {
  top: calc(50% - 1rem);
  left: 0;
  width: 100%;
  color: #000
}

.img-wrapper .overlay-text p.top-left {
  top: 0;
  left: 0
}

.img-wrapper .overlay-text p.top-center {
  top: 0;
  right: 0;
  left: 0
}

.img-wrapper .overlay-text p.top-right {
  top: 0;
  right: 0
}

.img-wrapper .overlay-text p.bottom-left {
  bottom: 0;
  left: 0
}

.img-wrapper .overlay-text p.bottom-center {
  bottom: 0;
  left: 0;
  right: 0
}

.img-wrapper .overlay-text p.bottom-right {
  bottom: 0;
  right: 0
}

<div class="img-wrapper">
  <img class="lazyload" data-sizes="auto" alt="Mobile is the default image"
       src="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150"
       data-src="https://placeholdit.imgix.net/~text?txtsize=33&txt=414%C3%97150&w=414&h=150">
  <div class="overlay-text">
    <p class="top-left">&lt;p class="top-left"&gt;Top Left&lt;/p&gt;</p>
    <p class="top-center">&lt;p class="top-center"&gt;Top Center&lt;/p&gt;</p>
    <p class="top-right">&lt;p class="top-right"&gt;Top Right&lt;/p&gt;</p>
    <p class="bottom-left">&lt;p class="bottom-left"&gt;Bottom Left&lt;/p&gt;</p>
    <p class="bottom-center">&lt;p class="bottom-center"&gt;Bottom Center&lt;/p&gt;</p>
    <p class="bottom-right">&lt;p class="bottom-right"&gt;Bottom Right&lt;/p&gt;</p>
  </div>
</div>

Answer 1

p 标签有默认边距，它在你的 fiddle 中是活跃的。添加这个:

overlay-text > p {
  margin: 0;
  padding: 0;
}

https://jsfiddle.net/60xszm8b/2/

剩下的问题是底部的文本将沿其基线对齐。如果你全部使用大写字母，这看起来没问题。 (您可以使用 text-transform: uppercase; 为此，尽管您可能必须将文本大小缩小以适应所有内容)