Thuộc tính vertical-align trong CSS

Thuộc tính vertical-align trong CSS

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ínhgiá trịVí dụMô tả
vertical-alignKhoảng cáchvertical-align: 10px;Xác định khoảng cách cho thành phần, có thể dùng số âm.
baselinevertical-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).
subvertical-align: sub;Canh lề thành phần giống như sử dụng subscript.
supervertical-align: super;Canh lề thành phần giống như sử dụng superscript.
topvertical-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-topvertical-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.
middlevertical-align: middle;Thành phần sẽ được canh giữa theo thành phần bao ngoài.
bottomvertical-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-bottomvertical-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.
inheritvertical-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).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC LẬP TRÌNH <span>thì dễ</span></p>
</body>
</html>

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

HỌC LẬP TRÌNH thì dễ

CSS viết:

p span {
    vertical-align: super;
}

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

HỌC LẬP TRÌNH thì dễ


Trình duyệt hỗ trợ

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.

Bình luận