CSS 文本对齐
文本对齐和文本方向
在本章中,您将学习以下属性
text-aligntext-align-lastdirectionunicode-bidivertical-align
文本对齐
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐、右对齐、居中对齐或两端对齐。
以下示例显示了居中对齐、左对齐和右对齐的文本(如果文本方向是从左到右,则默认左对齐;如果文本方向是从右到左,则默认右对齐)
当 text-align 属性设置为 "justify" 时,每一行都会被拉伸,使得每一行宽度相等,左右边距都是直的(就像杂志和报纸一样)
文本末行对齐
text-align-last 属性指定文本的最后一行如何对齐。
示例
对齐三个 <p> 元素中的最后一行文本
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
自己动手试一试 »
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
示例
设置图像在文本中的垂直对齐方式:
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 | 设置元素的垂直对齐方式 |