css网格布局下图标和文字无法居中怎么办_使用justify-self:center和align-self:center

新闻中心 NEWS CENTER

2025-12-02

浏览次数：次

使用 justify-self: center 和 align-self: center 可解决CSS网格中图标与文字居中问题，前者控制水平居中，后者控制垂直居中，需确保父容器设为 display: grid 且子元素无其他样式干扰。

在CSS网格布局中，如果图标和文字无法居中，使用 justify-self: center 和 align-self: center 是一种有效的解决方法。这两个属性可以分别控制网格项在其单元格中的水平和垂直对齐方式。

justify-self: center 用于将单个网格项在列轴（通常是水平方向）上居中对齐。
align-self: center 用于将单个网格项在行轴（通常是垂直方向）上居中对齐。

与容器上的 justify-items 或 align-items 不同，justify-self 和 align-self 可以单独作用于某个网格子元素。

确保父容器是 display: grid，然后在需要居中的子元素上设置：

TTSMaker

TTSMaker是一个免费的文本转语音工具，提供语音生成服务，支持多种语言。

2275

查看详情

例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 200px;
}

.icon-text {
  justify-self: center;
  align-self: center;
}

如果仍然不居中，检查以下几点：

基本上就这些。只要结构正确，justify-self 和 align-self 能快速实现单个网格项的居中。

以上就是css网格布局下图标和文字无法居中怎么办_使用justify-self:center和align-self:center的详细内容，更多请关注其它相关文章！