如何解决盒子内文本水平居中？text-align:center失效问题

我来帮你搞定这个文本居中的问题！看了你的代码，问题主要出在两个地方：.icons-text的样式设置，还有Grid布局的细节处理。

问题分析 #

• 你给.icons-text加了text-align: right，这直接让文本在容器里靠右显示；而且.icons-text是display: flex容器，默认的justify-content是flex-start，结合text-align:right就会让文本彻底贴到右侧。
• 你的Grid布局只定义了模板区域，但没有设置列宽，导致文本所在的单元格会尽可能拉伸，进一步放大了文本靠右的视觉效果。

解决方案 #

修改这两处就能让文本和图标一样完美居中：

1. 调整.icons-text的样式
   把text-align: right改成text-align: center，同时给flex容器加上justify-content: center，确保内容在容器里水平居中：

.icons-text {
 display: flex;
 align-items: center;
 justify-content: center; /* 新增：让flex内容水平居中 */
 font-family: 'Roboto';
 font-size: 14px;
 color: var(--main-grey);
 text-align: center; /* 替换原有的text-align: right */
}

2. 优化Grid布局（可选，让整体布局更均衡）
   给.skills设置明确的列宽，让图标和文本的布局更协调。比如让图标列自适应宽度，文本列占剩余空间：

.skills {
 display: grid;
 grid-template-columns: auto 1fr; /* 新增列宽规则 */
 grid-template-areas: 
  "hi ht" 
  "ci ct" 
  "ji jt" 
  "gi gt";
 gap: 15px; /* 可选：添加间距提升美观度 */
}

如果想要图标和文本各自占一半宽度，也可以用grid-template-columns: 1fr 1fr;，同时给图标容器加上居中样式，让图标在单元格里更规整：

.icons {
 display: flex;
 justify-content: center;
 align-items: center;
}

这样修改后，文本就会和图标一样，在盒子里完美居中啦！

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