将文本放在div上

Question

我正在尝试将文本放在响应的div /图像上的不同位置（左上角，顶部中心，右上角，左下角，底部中心，右下角）。宽度响应。

这是一个小提琴示例：https://jsfiddle.net/Fawn721/os01fnmt/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

p标签的默认边距在您的小提琴中有效。加上这个：

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

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

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