8-对齐单元格中某个项目 · 前端教学笔记[更新中...]

# 8. 对齐单元格/区域中的某个项目 [toc] ## 8.1 属性 | 序号 | 属性 | 描述 | | ---- | -------------- | ------------------------------------------------- | | 1 | `justify-self` | 设置某个项目在单元格/网格区域中水平方向的对齐方式 | | 2 | `align-self` | 设置某个项目在单元格/网格区域中垂直方向的对齐方式 | | 3 | `place-self` | 简写, `place-self: 垂直对齐方式水平对齐方式` | --- ![](https://img.kancloud.cn/c9/63/c963ddccf9fb5783eceeb16fdb96412b_1200x1252.jpg) ## 8.2 示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>对齐单元格/区域中的某个项目</title> <style> .container { width: 400px; height: 400px; background-color: wheat; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); /* 所有项目在网格区域中垂直水平对齐 */ place-items: center; } .item { width: 50px; height: 50px; background-color: violet; font-size: 2rem; } .item1 { /* 设置在单元格中的对齐方式 */ /* 当前全局设置为垂直水平居中,现改为垂直靠下,水平靠右 */ justify-self: end; align-self: end; /* 再改成垂直居中,水平居左 */ place-self: center start; } .item2 { background-color: lightskyblue; /* 水平跨2行,垂直跨2列,占据一块四个单元格组成的矩形网格区域 */ grid-row-end: span 2; grid-column-end: span 2; /* 设置某个项目在网格区域中的对齐方式 */ /* 当前默认采用容器中的设置参数: 垂直水平居中 */ /* 现在改成垂直靠下,水平居左 */ place-self: end start; } </style> </head> <body> <div class="container"> <span class="item item1">1</span> <span class="item item2">2</span> </div> </body> </html> ```