如何调整图片悬停时显示文本的位置？CSS新手求助

嘿，我看你遇到了图片悬停时文本位置调不准的问题，核心问题出在几个对CSS属性的误解和错误用法上，咱们一步步来解决：

首先，纠正错误的CSS属性用法 #

你代码里多次用到float:center，但CSS的float属性根本没有center这个取值，它只有left/right/none三个有效值，所以你写的这些float:center完全不会生效，直接删掉就好。

用正确的方式实现绝对定位元素的居中 #

你的.info元素用了绝对定位，但当前的margin-top:-13px是硬编码的固定值，只能适配特定字号，一旦字号变化就会偏移。改用transform: translate(-50%, -50%)是实现绝对定位元素完美居中的标准方案，不管内容大小都能自动居中：

.home-category .info{
  position:absolute;
  top:50%;
  left:50%;
  /* 删掉原来的margin-top:-13px，换成下面这行 */
  transform: translate(-50%, -50%);
  /* 加上text-align:center让内部文本居中 */
  text-align: center;
  width: 100%; /* 确保父容器宽度足够，文本能居中 */
}

修正hover时的文本偏移问题 #

你原来的hover代码里用margin-left:-25px; margin-top:-13px来调整位置，这是硬编码的偏移，会破坏居中效果。删掉这些手动偏移，只保留字号变化的逻辑就行，因为transform已经帮我们把文本牢牢居中了：

.home-category .block-left:hover .info a{
  font-size:128.57%;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  /* 删掉原来的margin-left和margin-top */
}

其他需要调整的细节 #

1. 把.info a里的float:center删掉，换成display: inline-block（让a元素能继承父元素的text-align:center），同时去掉无效的style="justify"和style="center"内联样式，因为justify不是有效的text-align值，center应该写在CSS里：

.home-category .info a{
  color:#fff;
  font-size:0;
  text-transform:uppercase;
  position:relative;
  font-weight:bold;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  white-space:nowrap;
  /* 新增这行，让文本能居中 */
  display: inline-block;
}

2. 删掉.inner-top a和.inner-bottom里的float:center，如果需要这些容器内的元素居中，用text-align:center或者flex布局。

最终修改后的关键CSS片段 #

.home-category .block-center .inner-top a{ left:9px; }
.home-category .block-center .inner-top a.frist{ margin-right:28px; }
.home-category .block-center .inner-bottom{ margin-top: 14px; }
.home-category .block-right .inner-bottom{ margin-top: 14px; }

/* 修正后的.info居中样式 */
.home-category .info{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.home-category .info a{
  color:#fff;
  font-size:0;
  text-transform:uppercase;
  position:relative;
  font-weight:bold;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  white-space:nowrap;
  display: inline-block;
}

.home-category .info a:before{
  content: "";
  height: 0px;
  opacity: 0;
  position: absolute;
  left:50%;
  top: 50%;
  transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  visibility: hidden;
  width: 0px;
  transform: translate(-50%, -50%); /* 让伪元素也居中 */
}

/*hover block left*/
.home-category .block-left:hover .info a{
  font-size:128.57%;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.home-category .block-left:hover .image:before{
  transform: scale(1);
  visibility:visible;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  opacity:1;
}

.home-category .info a:hover{ color:#25bce9 }

.home-category .block-left:hover .info a:before{
  transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  height:150px;
  width:150px;
  visibility:visible;
  opacity:1;
  /* 删掉原来的margin-top和margin-left，用transform居中 */
  transform: translate(-50%, -50%);
}

这样修改后，图片悬停时的文本就能始终保持居中，不管字号怎么变化都不会偏移啦。

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