Thuộc tính vertical-align

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

Thuộc tính vertical-align sắp xếp các nội dung theo chiều dọc.

Cấu trúc

tag {
    vertical-align: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
vertical-align Khoảng cách vertical-align: 10px; Xác định khoảng cách cho thành phần, có thể dùng số âm.
baseline vertical-align: baseline; Đây là dạng cơ bản, mặc định, các thành phần đều nằm theo cùng đường cơ bản (baseline).
sub vertical-align: sub; Canh lề thành phần giống như sử dụng subscript.
super vertical-align: super; Canh lề thành phần giống như sử dụng superscript.
top vertical-align: top; Canh phần trên cùng của thành phần theo phần trên cùng cao nhất của các thành phần trong cùng hàng.
text-top vertical-align: rtl; Canh phần trên cùng của thành phần theo phần trên cùng cao nhất của text của thành phần bao ngoài.
middle vertical-align: middle; Thành phần sẽ được canh giữa theo thành phần bao ngoài.
bottom vertical-align: bottom; Canh phần dưới cùng của thành phần theo phần dưới cùng thấp nhất của các thành phần trong cùng hàng.
text-bottom vertical-align: text-bottom; Canh phần dưới cùng của thành phần theo phần dưới cùng thấp nhất của text của thành phần bao ngoài.
inherit vertical-align: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN <span>thì dễ<span></p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN thì dễ

CSS viết:

p span {
    vertical-align: super;
}

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN thì dễ

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính vertical-align được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype