Nội dung
- Ví dụ
Thứ năm, 03/09/2020 | 00:00 GMT+7

Thuộc tính căn chỉnh theo chiều dọc CSS

vertical-align xác định căn chỉnh theo chiều dọc cho nội dung của ô bảng hoặc cho phần tử nội tuyến so với phần còn lại của stream nội tuyến.

vertical-align có thể lấy giá trị % hoặc length hoặc có thể lấy một trong 8 từ khóa sau:

  • baseline : Giá trị mặc định. Đường cơ sở của phần tử được căn chỉnh với đường cơ sở của phần tử chính.
  • bottom : Phần dưới cùng của phần tử được căn chỉnh đến phần dưới cùng của dòng.
  • middle : Giữa phần tử được căn chỉnh bằng một nửa chiều cao x của phần tử root . Chiều cao x là chiều cao của văn bản không có ký tự tăng dần hoặc giảm dần.
  • sub : Đường cơ sở của phần tử được căn chỉnh với đường cơ sở chỉ số con của phần tử root .
  • super : Đường cơ sở của phần tử được căn chỉnh với đường cơ sở chỉ số trên của phần tử root .
  • text-bottom : Phần dưới cùng của phần tử được căn chỉnh đến cuối văn bản.
  • text-top : Phần đầu của phần tử được căn chỉnh với đầu văn bản.
  • top : Phần trên cùng của phần tử được căn chỉnh với đầu dòng.

Nếu giá trị độ dài được cung cấp, phần tử được căn chỉnh ở độ dài được chỉ định phía trên đường cơ sở của phần tử root .

Nếu giá trị % được cung cấp, phần tử được căn chỉnh theo% được chỉ định phía trên đường cơ sở của giá trị root , với% là tham chiếu đến chiều cao dòng.

Đây là một ví dụ sử dụng căn chỉnh dọc:

.avatar {   vertical-align: middle; } 

Ví dụ

Có thể khó hình dung tác động của các giá trị từ khóa khác nhau đối với căn chỉnh theo chiều dọc, vì vậy đây là ví dụ với biểu tượng cảm xúc hình vỏ sò nội tuyến (🐚) được đặt với các giá trị khác nhau:

vertical-align: đường cơ sở

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: bottom

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: giữa

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: sub

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: siêu

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: text-bottom

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: text-top

Sammy bán vỏ sò 🐚 bên bờ biển.

vertical-align: top

Sammy bán vỏ sò 🐚 bên bờ biển.


Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03