Thuộc tính text-align của CSS

Định nghĩa và cách sử dụng

Thuộc tính text-align quy định cách đối齐 văn bản ngang trong yếu tố.

Thuộc tính này thiết lập cách đối齐 văn bản ngang trong các yếu tố cấp block bằng cách chỉ định điểm nào của khung hàng. Bằng cách cho phép người đại diện người dùng điều chỉnh khoảng cách giữa các ký tự và từ trong nội dung hàng, có thể hỗ trợ giá trị justify; các người đại diện người dùng khác nhau có thể nhận được kết quả khác nhau.

Xin xem thêm:

Hướng dẫn CSS:CSS văn bản

Hướng dẫn HTML DOM:Thuộc tính textAlign

Mô hình

Đặt cách đối齐 văn bản của các yếu tố h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Thử ngay

Ngữ pháp CSS

text-align: left|right|center|justify|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
left Đặt văn bản vào bên trái. Giá trị mặc định: do trình duyệt quyết định.
right Căn chỉnh văn bản vào bên phải.
center Căn chỉnh văn bản vào giữa.
justify Thực hiện hiệu ứng văn bản两端.
inherit Xác định giá trị của thuộc tính text-align được kế thừa từ yếu tố cha.

Giá trị justify

Thuộc tính căn chỉnh水平 cuối cùng là justify, nó cũng có một số vấn đề của riêng mình.

Giá trị justify có thể căn chỉnh两端 văn bản. Trong văn bản两端, hai bên của dòng văn bản được đặt ở biên trong của yếu tố cha. Sau đó, điều chỉnh khoảng cách giữa các từ và các ký tự để độ dài của các dòng bằng nhau. Bạn có thể đã nhận ra rằng văn bản两端 rất phổ biến trong lĩnh vực in. Tuy nhiên, trong CSS, cần phải suy nghĩ thêm.

Yêu cầu người đại diện người dùng (không phải CSS) xác định cách văn bản两端被 kéo để lấp đầy khoảng trống giữa hai biên của yếu tố cha. Ví dụ, một số trình duyệt có thể thêm khoảng trống bổ sung giữa các từ, trong khi một số trình duyệt khác có thể phân phối đều khoảng trống bổ sung giữa các ký tự (mặc dù quy tắc CSS đặc biệt nhấn mạnh, nếu) Thuộc tính letter-spacingĐịnh nghĩa为一个长度值，“代理 người dùng không thể thêm hoặc giảm khoảng cách giữa các ký tự”）。Một số người đại diện có thể giảm khoảng cách của một số dòng, làm cho văn bản trở nên chặt hơn. Mọi phương pháp này đều ảnh hưởng đến外观 của yếu tố, thậm chí thay đổi chiều cao, tùy thuộc vào mức độ ảnh hưởng của lựa chọn căn chỉnh của người đại diện đến bao nhiêu dòng văn bản.

CSS cũng không chỉ định cách xử lý dấu gạch dưới (ghi chú 1). hầu hết các văn bản两端 đều sử dụng dấu gạch dưới để chia dài từ khóa ở hai dòng khác nhau, từ đó giảm khoảng cách giữa các từ, cải thiện外观 của dòng văn bản. Tuy nhiên, vì CSS không định nghĩa hành vi dấu gạch dưới, người đại diện không thể tự động thêm dấu gạch dưới. Do đó, văn bản两端 trong CSS trông không đẹp như khi in, đặc biệt là khi yếu tố quá hẹp, chỉ có thể đặt một số từ trong mỗi dòng. Tất nhiên, có thể sử dụng yếu tố thiết kế hẹp, nhưng cần cẩn thận với nhược điểm tương ứng.

Ghi chú 1:Trong CSS không có hướng dẫn về cách xử lý dấu gạch dưới, vì các ngôn ngữ khác nhau có các quy tắc dấu gạch dưới khác nhau. Quy tắc không cố gắng hòa hợp những quy tắc có thể không đầy đủ này mà chỉ không đề cập đến vấn đề này.

Chi tiết kỹ thuật

Giá trị mặc định: Nếu thuộc tính direction là ltr, giá trị mặc định là left; nếu direction là rtl, thì là right.
Di truyền: yes
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.textAlign="right"

Các ví dụ khác

Căn chỉnh văn bản
Ví dụ này minh họa cách căn chỉnh văn bản.

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5