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

我正在创建一个网站，并希望有两个图像并排与一段文字在两个图像的中心

Html:

---

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

我将每个图像和文本包装在一个附加容器中，然后将文本绝对定位在图像顶部的中心位置。我想这就是你要找的

。图像行{
显示器：flex；
}
.图像容器{
宽度：50%；
位置：相对位置；
}
.图像容器img{
宽度：100%；
高度：自动；
}
.图像容器p{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
字体大小：24px；
字体大小：粗体；
保证金：0；
}

团队

团队

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

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

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

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