css对齐方式

/* CSS 对齐方式示例 */

/* 1. 文本对齐 */
p {
  text-align: center; /* 水平居中对齐 */
}

/* 2. Flexbox 对齐 */
.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center;     /* 垂直居中对齐 */
}

/* 3. Grid 对齐 */
.grid-container {
  display: grid;
  place-items: center; /* 水平和垂直居中对齐 */
}

/* 4. 行内元素垂直对齐 */
span {
  vertical-align: middle; /* 行内元素垂直居中对齐 */
}

解释说明：

1. 文本对齐 (text-align)：用于控制块级元素（如 <p>）中的文本对齐方式。常见的值有 left、right、center 和 justify。

2. Flexbox 对齐：使用 display: flex 创建弹性盒子布局，通过 justify-content 控制子元素的水平对齐，align-items 控制垂直对齐。

3. Grid 对齐：使用 display: grid 创建网格布局，place-items: center 可以同时设置水平和垂直居中对齐。

4. 行内元素垂直对齐 (vertical-align)：用于行内元素（如 <span>），常见的值有 top、middle、bottom 等。