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链接的信息将有所帮助。如果您对我所做的更改以及为什么更改有任何疑问，请随时提出疑问！

图像上方的浮动文本？

1 个答案: