html - 如何在两个并排图像上重叠文本

Question

我正在创建一个网站，并希望将两张图片并排放置，并在两张图片的中心放置一段文字。

HTML:

<div id="body">
    <div class="image-row-container">
        <img class="image-row image-row-1" src="assets/team-photo.JPG">
        <p class="text-overlap" style="position: absolute; left: 25%; transform: translateX(-75%);">The Team</p>
        <img class="image-row image-row-2" src="assets/test.JPG">
        <p class="text-overlap" style="position: absolute; left: 75%; transform: translateX(-25%);">The Vehicle</p>
    </div>
</div>

CSS:

.image-row {
display:inline-block;
width:50%;
height:500px;
}

.image-row-1 {
float:left;
}

.image-row-2 {
float:right;
}

到目前为止，我已经设法将两个图像并排放置并水平对齐文本，但我不知道如何简单地将文本垂直对齐到图像的中心。如果您对我的主要问题有任何提示，或者对格式化、不同方法或糟糕代码的提示有任何建议，我们将不胜感激。我是新手所以任何帮助都是很好的帮助!

Answer 1

我将每个图像和文本包装在一个额外的容器中，然后将文本绝对定位为在图像顶部居中。我想这就是您要找的。

.image-row {
  display: flex;
}

.image-container {
  width: 50%;
  position: relative;
}

.image-container img {
  width: 100%;
  height: auto;
}

.image-container p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

<div class="image-row">
  <div class="image-container">
    <img src="https://placeimg.com/300/500/nature">
    <p>The Team</p>
  </div>
  <div class="image-container">
    <img src="https://placeimg.com/300/500/nature?t=1529100921702">
    <p>The Team</p>
  </div>
</div>