justify-self用于Grid布局中控制网格项在单元格内的水平对齐方式，取值包括start、end、center和stretch，默认为stretch；需父容器为display: grid，仅作用于直接子元素，与align-self分别控制横向和纵向对齐。
justify-self 是 CSS 中用于控制单个网格项在单元格内沿行轴（水平方向）对齐方式的属性。它只在使用 Grid 布局 时生效，在普通布局或 Flex 布局中不起作用。
当你在一个网格容器中的某个网格项上设置 justify-self，可以决定这个项目在其所在网格单元格中的水平对齐方式。常见取值包括：
示例：
.container {
display: grid;
grid-template-columns: 100px 100px;
width: 300px;
}
<p>.item {
justify-self: center; /<em> 在单元格中水平居中 </em>/
}</p>假设你有一个 2×2 的网格，想让其中一个项目在它的格子中靠右对齐：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
<p>.box1 {
justify-self: end; /<em> 靠右对齐 </em>/
}</p><p>.box2 {
justify-self: center; /<em> 居中对齐 </em>/
}</p>这样，.box1 会在其所在的列单元格中向右对齐，而不会影响其他项目。
确保父容器是 display: grid，否则 justify-self 不会起作用。它只对直接位于网格容器中的子元素有效。
如果希望所有子项统一设置对齐方式，可以使用 justify-items 在容器上统一设置，而不是逐个写 justify-self。
justify-self 控制的是行轴（横向），而 align-self 控制列轴（纵向）。例如：
.item {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
两者结合可实现单元格内的完全居中。
基本上就这些。只要用对了 Grid 布局，justify-self 就能灵活控制单个项目在单元格中的水平位置。
以上就是css justify-self在单元格中如何调整对齐的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
742
收藏
