文字顶部中心对齐图片

Question

所以我想要什么文字在图像上并水平居中。然后窗口调整大小它仍然存在。 现在它位于图像的底部。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

Fiddle

  position: absolute
  width:100%
  margin: auto

到您的图片文字。

如果您想在中心添加宽度为100％的内容，则必须使用width:100% and margin:auto。