在图像上方浮动文本？ [复制]

Question

我正在尝试在图像上方放置一小块文本，并在图像后面加上标题和段落。现在浮动框正在破坏标题，因为标题应该居中但被推到左边。

这是让一段文字漂浮在图像上的最佳方式吗？

.cell {
  margin-top: 8px;
  vertical-align: middle;
}

.galleryPic {
  width: 80%;
  max-width: 388px;
  height: 100%;
  max-height: 220px;
}

.imgDate {
  top: -8vw;
  right: 12vw;
  color: white;
  background-color: red;
  width: 20vw;
  position: relative;
  z-index: 99;
  text-transform: uppercase;
  margin: 15px;
  float: right;
  padding: 1vw 2vw;
}

.cell h3 {
  position: relative;
  text-align: center;
}

.cell p {
  position: relative;
}

<div class="cell">
  <img class="galleryPic">
  <div class="imgDate">Jan 9, 2019</div>
  <h3>Header</h3>
  <p>Paragraph</p>
</div>

Answer 1

如果这就是你想要的，请告诉我。如果你不需要使用

<img> 

标签，我就是这样做的。

.cell {
  display: grid;
  justify-content: center;
}

.img {
  height: 300px;
  width: 300px;
  background: url('https://unsplash.it/300/300');
}

.galleryPic {
  width: 80%;
  max-width: 388px;
  height: 100%;
  max-height: 220px;
}

.imgDate {
  color: white;
  background-color: red;
  position: relative;
  z-index: 99;
  text-transform: uppercase;
  margin: 15px;
  padding: 1vw 2vw;
}

.cell h3 {
  text-align: center;
}

.cell p {
  text-align: center;
}

<div class="cell">
  <div class="img">
    <div class="imgDate">Jan 9, 2019</div>
  </div>
  <h3>Header</h3>
  <p>Paragraph</p>
</div>

有关何时使用<img> 标记以及何时使用CSS 背景属性this 链接的信息将有所帮助。如果您对我所做的更改以及更改的原因有任何疑问，请随时提问！