Căn chỉnh văn bản CSS
Căn chỉnh văn bản và hướng văn bản
Trong chương này bạn sẽ tìm hiểu về các thuộc tính sau:
-
text-align -
text-align-last -
direction -
unicode-bidi -
vertical-align
Căn chỉnh văn bản
Thuộc tính text-align được sử dụng để thiết lập căn chỉnh theo chiều ngang của văn bản.
Một văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều.
Ví dụ sau hiển thị văn bản được căn giữa và căn trái và phải (căn chỉnh trái là mặc định nếu hướng văn bản là từ trái sang phải và căn chỉnh phải là mặc định nếu hướng văn bản là từ phải sang trái):
Khi thuộc tính text-align được đặt thành "justify", mỗi dòng được kéo dài sao cho mỗi dòng có chiều rộng bằng nhau và lề trái và lề phải đều thẳng (như trong tạp chí và báo):
Căn chỉnh văn bản cuối cùng
Thuộc tính text-align-last chỉ định cách căn chỉnh dòng cuối cùng của văn bản.
Ví dụ
Căn chỉnh dòng văn bản cuối cùng trong ba phần tử <p>:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}Hãy tự mình thử » Văn bản chỉ đạo
Các thuộc tính direction và unicode-bidi có thể được sử dụng để thay đổi hướng văn bản của một phần tử:
Căn dọc
Thuộc tính vertical-align thiết lập cách căn chỉnh theo chiều dọc của một phần tử.
Ví dụ
Đặt căn chỉnh dọc của hình ảnh trong văn bản:
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;
} Hãy tự mình thử »Thuộc tính căn chỉnh/hướng văn bản CSS
| Property | Description |
|---|---|
| direction | Specifies the text direction/writing direction |
| text-align | Specifies the horizontal alignment of text |
| text-align-last | Specifies how to align the last line of a text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
