CSS Grid布局中如何将文本对齐到所在网格单元格底部

你有WPF Grid使用经验的话，理解CSS Grid的对齐逻辑非常快：要让单个网格子项对齐到所属单元格的底部，只需要给对应子元素设置align-self: end即可，效果等价于WPF中给元素设置VerticalAlignment="Bottom"。

具体修改步骤 #

打开你的style.module.css文件，找到.username的样式规则，新增一行对齐属性：

.username {
    grid-area: username;
    color: white;
    align-self: end; /* 新增该行，控制当前元素在单元格内纵向靠下对齐 */
}

对齐属性参考（对应WPF布局逻辑） #

给你对应下WPF的逻辑，记起来更快：

• 容器级全局对齐（作用于所有直接子元素）
  • align-items：控制所有子项的纵向对齐规则，默认值为stretch（拉伸填满单元格高度），可选值start（顶部对齐）、center（垂直居中）、end（底部对齐），等价于WPF中Grid统一设置的VerticalAlignment
  • justify-items：控制所有子项的横向对齐规则，可选值同上，等价于WPF中Grid统一设置的HorizontalAlignment
• 单个子项自定义对齐（优先级高于容器全局设置）
  • align-self：单独控制当前元素的纵向对齐，就是你当前场景需要用到的属性
  • justify-self：单独控制当前元素的横向对齐

额外提一处代码适配问题：标准HTML中没有<text>标签，这是WPF、SVG里的标签，普通HTML页面中文本容器建议替换为<span>、<div>或者<p>标签，避免出现非预期渲染问题。

修改完成后，Username文本就会自动贴紧自身所在网格单元格的底部，和下方的 discriminator 文本自然衔接。

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