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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何重叠两个并排图像的文本

1 个答案: