并排图片悬停显示文本：绝对定位文本居中问题求助

核心思路 #

通过控制容器宽度与文本定位逻辑，同时解决绝对定位居中与不必要换行的问题：

• 让.item-single宽度完全匹配图片尺寸，避免被文本撑开
• 用transform: translateX(-50%)实现绝对定位文本的精准水平居中
• 按需控制文本是否换行

完整代码示例 #

HTML（保留你的原始结构）

<div class="items">
  <div class="item-single">
    <a href="#">
      <img src="your-image-url.jpg" alt="图片描述">
    </a>
    <p>Long text under image that won't wrap unnecessarily</p>
  </div>
  <div class="item-single">
    <a href="#">
      <img src="your-image-url.jpg" alt="图片描述">
    </a>
    <p>Another long text example</p>
  </div>
  <!-- 另外两个item-single重复上述结构 -->
</div>

CSS

.items {
  display: flex;
  gap: 16px; /* 图片之间的间距，可按需调整 */
  flex-wrap: wrap; /* 屏幕较窄时自动换行，可选 */
}

.item-single {
  position: relative;
  flex: 0 0 auto; /* 宽度由内部图片决定，不随flex布局拉伸 */
}

.item-single img {
  display: block; /* 移除图片下方默认的空白间隙 */
  width: 100%; /* 图片自适应容器，也可设置固定宽度如200px */
}

.item-single p {
  position: absolute;
  top: calc(100% + 8px); /* 与图片下方保持8px间距 */
  left: 50%;
  transform: translateX(-50%); /* 基于自身宽度水平居中 */
  margin: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  white-space: nowrap; /* 强制文本不换行，若需换行可移除该属性并添加width: max-content */
  opacity: 0; /* 默认隐藏文本 */
  transition: opacity 0.3s ease;
  pointer-events: none; /* 避免隐藏文本干扰图片/链接的点击事件 */
}

.item-single:hover p {
  opacity: 1; /* 鼠标悬停时显示文本 */
}

关键细节说明 #

• flex: 0 0 auto：确保.item-single的宽度完全由内部图片决定，不会被文本撑开或flex布局强制拉伸
• left: 50% + transform: translateX(-50%)：绝对定位元素水平居中的标准写法，能让文本相对于图片精准居中，不受容器宽度影响
• white-space: nowrap：如果不需要文本换行则保留，若想允许换行但保持居中，移除该属性并添加width: max-content，让文本宽度自适应内容后再居中
• pointer-events: none：避免隐藏状态下的文本块干扰图片或链接的交互

内容的提问来源于stack exchange，提问作者jay.den