求助：实现图片悬停时data-sentence属性文本水平居中

我帮你搞定这个鼠标悬停文本居中的问题！看你现有的CSS，其实问题出在伪元素的定位和宽度设置上，导致text-align: center没发挥应有的作用，我给你调整一下代码：

修正后的CSS代码 #

[data-sentence] { 
  position: relative; 
} 

[data-sentence]::after { 
  content: attr(data-sentence); 
  text-align: center; 
  padding: 5px 15px; /* 增加左右内边距，让文本更舒展 */
  font-size: 17px; 
  background: #333; 
  color: #fff; 
  z-index: 1000; 
  display: none; 
  position: absolute; 
  top: calc(100% - 55px); 
  border-bottom-right-radius: 20px; 
  border-bottom-left-radius: 20px; 
  left: 50%; 
  transform: translate(-50%, 0); 
  width: fit-content; /* 宽度自适应文本内容 */
  min-width: 245px; 
  min-height: 50px; 
  /* 用flex布局同时实现水平+垂直居中，体验更好 */
  display: flex;
  align-items: center;
  justify-content: center;
} 

[data-sentence]:hover::after { 
  display: flex; /* 对应flex布局的显示方式 */
} 

[data-sentence='']::after { 
  display: none !important; 
}

关键调整说明： #

• 移除了right: 0：这个属性会强制伪元素右边缘贴紧父元素，结合left:50%会把伪元素宽度锁死在父元素的一半，直接限制了文本居中的效果；
• 新增width: fit-content：让伪元素宽度跟着文本内容自动调整，同时保留min-width:245px确保不会太窄；
• 改用flex布局：通过align-items: center和justify-content: center同时搞定水平和垂直居中，就算文本换行也能保持整齐居中，比单纯依赖text-align更可靠；
• 微调左右内边距：避免文本和边框挤在一起，提升视觉舒适度。

这样修改后，鼠标悬停在带data-sentence属性的图片上时，提示文本就能完美水平（同时垂直）居中显示了。

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