html - 图片上的文字顶部居中对齐

Question

所以我希望图像上的文字水平居中。然后调整窗口大小它仍然在那里。 现在它在图像的底部。

.main_image {
  display: block;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}
.image_text {
  font-family: "Open Sans";
  text-align: left;
  border: 1px solid;
  position: relative;
  bottom: 50%;
  transform: translateY(-50%);
}
.main_text {
  font-size: 38.889px;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
}
.main_subtext {
  font-size: 22.222px;
  color: rgba(0, 0, 0, 0.988);
}

<figure class="images_class">
  <img src="http://i.imgur.com/sOCyriP.png" alt="" class="main_image" />
  <figcaption class="image_text">
    <div class="main_text">Main text</div>
    <div class="main_subtext">Subtext</div>
  </figcaption>
</figure>

Answer 1

您应该将文本 absolute 放置在 relative 容器中。

.images_class {
  position: relative;
}
.main_image {
  display: block;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}
.image_text {
  font-family: "Open Sans";
  text-align: center;
  border: 1px solid;
  width: 90%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}
.main_text {
  font-size: 38.889px;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
}
.main_subtext {
  font-size: 22.222px;
  color: rgba(0, 0, 0, 0.988);
}

<figure class="images_class">
  <img src="http://i.imgur.com/sOCyriP.png" alt="" class="main_image" />
  <figcaption class="image_text">
    <div class="main_text">Main text</div>
    <div class="main_subtext">Subtext</div>
  </figcaption>
</figure>