如何在特殊image slider的图片内居中文本并滑动对应div容器

开发者阿泽

2026-10-7

图片轮播文本叠加实现方案

需求说明

每张图片对应的文本需在图片内部居中展示
优先以同时包裹图片和文本的div容器作为轮播滑动单元，避免单独处理图片、文本的滑动同步问题，其他可行实现方案也可采用

实现步骤

1. 结构代码

直接使用你提供的容器包裹结构即可，该结构天然满足滑动单元统一的需求：

<div class="slider__images--container">
    <img src="" alt="" class="slider__images--container-img">
    <h3 class="slider__images--container-h3">示例文本</h3>
</div>

2. 样式配置

只需要给外层容器加相对定位，文本用绝对定位配合位移实现居中即可，参考样式如下：

/* 轮播单个滑动项容器 */
.slider__images--container {
  position: relative;
  width: 100%;
  /* 可根据实际需求调整宽高比，或者直接写固定高度 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* 轮播图片样式 */
.slider__images--container-img {
  width: 100%;
  height: 100%;
  /* 保证图片不变形，多余部分裁剪 */
  object-fit: cover;
}
/* 叠加文本样式 */
.slider__images--container-h3 {
  position: absolute;
  /* 上下左右居中核心代码 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 下面的文本样式可根据需求自定义修改 */
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  margin: 0;
  padding: 8px 16px;
}