如何实现两张图片居中并排显示并添加文字？求解决方案

一、修复图片并排问题（Flex布局方案） #

你的CSS未设置.column元素的横向排列规则，块级元素默认会独占一行，导致图片上下堆叠。使用Flex布局可以快速实现居中并排：

修改后的CSS：

.row {
  display: flex;
  justify-content: center; /* 让内部元素水平居中 */
  gap: 10px; /* 可选：设置图片间的间距 */
  margin: 20px 0; /* 可选：设置行与行的间距 */
}

.column {
  width: 20.33%;
  padding: 5px;
  position: relative; /* 为后续文字定位做准备 */
}

.column img {
  width: 100%; /* 让图片占满容器宽度 */
  display: block; /* 消除图片默认的底部间隙 */
}

修改后每个.row内的两个.column会自动水平居中并排。

二、为图片添加叠加文字 #

利用绝对定位可以将文字放置在图片上方，具体实现如下：

修改后的HTML（新增文字元素）： #

<body>
<div class="row" >
    <div class="column" >
        <img src="image/serviceimages/SVG/Asset 1.svg" alt="图片1">
        <div class="img-text">图片1的说明文字</div>
    </div>

    <div class="column" >
        <img src="image/serviceimages/SVG/Asset 2.svg" alt="图片2">
        <div class="img-text">图片2的说明文字</div>
    </div>
</div> 

<div class="row" >
    <div class="column" >
        <img src="image/serviceimages/SVG/Asset 3.svg" alt="图片3">
        <div class="img-text">图片3的说明文字</div>
    </div>

    <div class="column" >
        <img src="image/serviceimages/SVG/Asset 4.svg" alt="图片4">
        <div class="img-text">图片4的说明文字</div>
    </div>
</div>
</body>

添加对应文字样式CSS： #

.img-text {
  position: absolute;
  bottom: 10px; /* 控制文字距离图片底部的距离 */
  left: 50%;
  transform: translateX(-50%); /* 实现文字水平居中 */
  color: white;
  background-color: rgba(0,0,0,0.5); /* 半透明背景提升文字可读性 */
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

若希望文字显示在图片顶部，只需将bottom: 10px改为top: 10px即可。

三、备选方案：浮动布局（兼容旧浏览器） #

如果需要兼容不支持Flex的旧浏览器，可采用浮动实现：

.row {
  width: fit-content;
  margin: 20px auto; /* 让整行水平居中 */
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.column {
  float: left;
  width: 20.33%;
  padding: 5px;
  position: relative;
}

.column img {
  width: 100%;
  display: block;
}

配合上述.img-text样式，同样能实现图片居中并排+文字叠加的效果。

内容的提问来源于stack exchange，提问作者saskee