文本对齐对齐 - CSS

简介

在网页设计中，文本的对齐方式是非常重要的。CSS 提供了多种对齐方式来满足设计需求，包括水平对齐和垂直对齐。本文将介绍 CSS 的文本对齐方式和一些示例。

水平对齐

text-align

text-align 属性指定一个块级元素内的文本水平对齐方式。

| 值 | 描述 | | ------------- |:-------------:| | left | 文本左对齐 | | center | 文本居中对齐 | | right | 文本右对齐 |

示例代码：

div {
  text-align: center;
}

justify-content

justify-content 属性用于对齐文本行的内容。

| 值 | 描述 | | ------------- |:-------------:| | center | 居中对齐 | | flex-start | 左对齐 | | flex-end | 右对齐 | | space-between | 两端对齐 | | space-around | 每个项周围均匀分布 |

示例代码：

div {
  display: flex;
  justify-content: center;
}

垂直对齐

vertical-align

vertical-align 属性控制行内元素在容器内的垂直对齐方式。

| 值 | 描述 | | ------------- |:-------------:| | baseline | 默认以基线对齐 | | top | 文本顶部对齐 | | bottom | 文本底部对齐 | | middle | 文本居中对齐 |

示例代码：

img {
  vertical-align: middle;
}

line-height

line-height 属性设置元素的文本行的行间距。

示例代码：

div {
  line-height: 2;
}

总结

CSS 提供了多种方式来控制文本的对齐方式，在网页设计中具有非常重要的作用。通过本文的介绍，相信大家对 CSS 的文本对齐方式有了更深入的了解。