Căn chỉnh văn bản - Thủ thuật CSS

Anonim

Các text-alignbất động sản trong CSS được sử dụng cho việc sắp xếp các nội dung bên trong của một yếu tố ngăn chặn.

p ( text-align: center; )

Đây là các giá trị truyền thống cho text-align:

  • left- Giá trị mặc định. Nội dung sắp xếp dọc theo phía bên trái.
  • right - Nội dung căn lề dọc bên phải.
  • center- Nội dung căn giữa các cạnh trái và phải. Khoảng trắng ở bên trái và bên phải của mỗi dòng phải bằng nhau.
  • justify - Khoảng trắng nội dung sao cho nhiều khối vừa với một dòng nhất có thể và từ đầu tiên trên dòng đó nằm dọc theo cạnh trái và từ cuối cùng nằm dọc theo cạnh phải.
  • inherit - Giá trị sẽ là bất kỳ giá trị nào của phần tử mẹ.

“Nội dung” được sử dụng ở đây dưới dạng thuật ngữ thay vì “văn bản”, vì mặc dù căn chỉnh văn bản chắc chắn ảnh hưởng đến văn bản, nhưng nó ảnh hưởng đến tất cả các phần tử nội dòng hoặc khối nội tuyến trong vùng chứa đó.

Có hai giá trị mới trong CSS3, bắt đầu và kết thúc. Những giá trị này giúp hỗ trợ nhiều ngôn ngữ dễ dàng hơn Ví dụ: tiếng Anh là ngôn ngữ từ trái sang phải (ltr) và tiếng Ả Rập là ngôn ngữ từ phải sang trái (rtl). Việc sử dụng "phải" và "trái" cho các giá trị quá cứng nhắc và không thích ứng khi hướng thay đổi. Những giá trị mới này thích ứng:

  • start - Giống như “left” trong ltr, giống “right” trong rtl.
  • end - Giống như "phải" trong ltr, giống như "trái" trong rtl.

Ngoài ra match-parent, tương tự như inherit, chỉ có điều giá trị mới được tính theo hướng của phần tử hiện tại thay vì, bạn biết đấy, không làm điều đó.

Có một số điều trong thông số kỹ thuật chưa có bất kỳ hỗ trợ trình duyệt nào. Một là giá trị “bắt đầu kết thúc” sẽ căn chỉnh dòng đầu tiên như thể là “bắt đầu” và bất kỳ dòng nào tiếp theo như thể nó là “kết thúc”. Một cách khác là cung cấp cho giá trị một chuỗi, như text-align: "." start;Văn bản sẽ sắp xếp dọc theo lần xuất hiện đầu tiên của giá trị đó, như để sắp xếp một cột số dọc theo dấu thập phân.

Ví dụ

Văn bản này được căn trái.

Văn bản này được căn phải.

Tôi là trung tâm!

Tôi chính đáng. Tôi điền chính xác khoảng trống (ngoại trừ dòng cuối cùng), ngay cả khi tôi phải giãn ra một chút.

Tôi thừa hưởng sự liên kết của cha mẹ tôi. Trong trường hợp này, điều đó có nghĩa là bên trái.

Hỗ trợ trình duyệt

Đối với trái, phải, giữa, căn đều:

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Bất kì Bất kì Bất kì 3,5+ 3+ Bất kì Bất kì

Đối với các giá trị startvà end:

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Bất kì 3.1+ 3,6+ không ai không ai Bất kì Bất kì