二维码
搜索 ×

CSS 文本对齐方式

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 文本对齐方式

文本对齐方式和文本方向

在本章中，您将了解以下属性：

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

文本对齐方式

text-align:该属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐、居中或对齐。

以下示例显示居中对齐以及左右对齐的文本 （如果文本方向为从左到右，则默认左对齐，右对齐 如果文本方向为从右到左，则默认对齐）：

1
2
3
4
5
h1 {  text-align: center;}  

h2 {  text-align: left;}  

h3 {  text-align: right;}

当属性设置为“justify”时，每行 拉伸，使每行的宽度相等，左右边距 直（如杂志和报纸）：text-align

1
div {  text-align: justify;}

文本最后对齐

text-align-last该属性指定如何对齐文本的最后一行。

1
2
3
4
5
6
7
将三个 <p> 元素中的最后一行文本对齐：

p.a {  text-align-last: right;}  

p.b {  text-align-last: center;}  

p.c {  text-align-last: justify;}

文本方向

direction和unicode-bidi属性可用于更改元素的文本方向：

1
2
p {  direction: rtl;  
  unicode-bidi: bidi-override;}

垂直对齐

vertical-align:该属性设置元素的垂直对齐方式。

1
2
3
4
5
6
7
8
9
10
11
设置文本中图像的垂直对齐方式：

img.a {  vertical-align: baseline;}  

img.b {  vertical-align: text-top;}  

img.c {  vertical-align: text-bottom;}  

img.d {  vertical-align: sub;}  

img.e {  vertical-align: super;}

CSS 文本对齐/方向属性

属性 说明
direction 指定文本方向/书写方向
text-align 指定文本的水平对齐方式
text-align-last 指定如何对齐文本的最后一行
unicode-bidi 与 direction 属性一起使用，以设置或返回是否应重写文本以支持同一文档中的多种语言
vertical-align 设置元素的垂直对齐方式

推荐教程