Image Grid Hover功能开发求助：文本未居中及网格布局异常问题

嘿，我来帮你搞定这两个头疼的问题！先分析一下你代码里的问题点，再给出完整的修复方案：

一、文本无法在图片上居中显示的问题 #

你的.name元素没有正确定位在图片上方，也没设置居中布局。我们需要调整定位方式，再用Flex实现文本居中：

修复思路： #

• 给.pic设置position: relative，让内部的.name能基于它定位
• 让.name绝对覆盖整个图片区域，并用Flex布局让文本水平垂直居中
• 初始隐藏文本，hover时显示，加上过渡动画让效果更自然

二、网格布局异常的问题 #

你当前的grid-template-columns用了auto，再配合.size的百分比宽度，容易导致网格项宽度不一致、布局错位。我们改用fr单位来分配列宽，让网格布局更稳定：

修复思路： #

• 用repeat()函数定义网格列数，平板用2列、桌面用3列，每列宽度等分（1fr）
• 去掉.size的百分比宽度，让图片占满网格项的空间，避免布局混乱

修改后的完整CSS代码 #

/* 基础网格布局 */
.members-grid {
  display: grid;
  grid-gap: 5px;
  /* 让网格项拉伸填满列宽，替代justify-items:center */
  justify-items: stretch;
  padding-bottom: 5em;
  /* 移动端默认1列 */
  grid-template-columns: 1fr;
}

/* 图片样式：占满网格项，保持比例 */
.members-grid .size {
  width: 100%;
  height: auto;
  display: block; /* 去掉图片默认的行内间距 */
}

/* 每个图片容器设置相对定位 */
.pic {
  position: relative;
  overflow: hidden; /* 防止文本溢出 */
}

/* 文本容器：绝对覆盖图片，初始隐藏 */
.name {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明背景增强可读性 */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

/* hover图片容器时显示文本 */
.pic:hover .name {
  opacity: 1;
}

/* 文本样式：可以根据需求调整颜色、大小 */
.name h2 {
  color: white;
  margin: 0;
  padding: 10px;
  text-align: center;
}

/* 平板设备适配 */
@media only screen and (min-width: 600px) and (max-width: 768px) {
  .members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面设备适配 */
@media (min-width: 768px) {
  .members-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

HTML代码无需修改（保持你原来的结构即可） #

<div class="members-grid">
  <div class="pic">
    <img src="eunbi.jpg" alt="kwon eunbi" class="size">
    <div class="name">
      <h2>Kwon Eunbi</h2>
    </div>
  </div>
  <div class="pic">
    <img src="sakura.jpg" alt="miywaki sakura" class="size">
    <div class="name">
      <h2>Miyawaki Sakura</h2>
    </div>
  </div>
  <div class="pic">
    <img src="hyewon.jpg" alt="kang hyewon" class="size">
    <div class="name">
      <h2>Kang Hyewon</h2>
    </div>
  </div>
</div>

关键修改说明： #

1. 文本居中：通过position: absolute让.name覆盖图片，再用display: flex + justify-content/align-items实现完美居中，半透明背景让文本更清晰
2. 网格布局：用repeat(2, 1fr)和repeat(3, 1fr)替代auto，确保每列宽度均等，图片设置width:100%占满网格项，彻底解决布局错位问题
3. 交互体验：添加了transition过渡动画，hover效果更流畅自然

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