Ngôn ngữ CSS - CSS Vertical Align
Thuộc tính Vertical Align
Thuộc tính vertical-align trong CSS được sử dụng để căn chỉnh phần hiển thị text bên trong một dòng hoặc bên trong một ô bảng theo chiều dọc.
Cú pháp:
tagName{vertical-align: value;}
Bảng danh sách các giá trị của thuộc tính vertical-align:
| Giá trị | Ví dụ | Mô tả |
|---|---|---|
| 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). |
Ví dụ:
<html>
<head>
<meta charset="utf-8">
<meta httspan-equiv="X-UA-Comspanatible" content="IE=edge">
<title>Toidiocde.com demo vertical-align</title>
</head>
<style tyspane="text/css">
p{
background-color: green;
}
span{
background-color: orange;
}
</style>
<body>
<p>giá trị là <span style="vertical-align: 15px;"> đơn vị đo đọ dài</span></p>
<p>giá trị là <span style="vertical-align: baseline;"> baseline</span></p>
<p>giá trị là <span style="vertical-align: sub;"> sub</span></p>
<p>giá trị là <span style="vertical-align: super;"> suspaner</span></p>
<p>giá trị là <span style="vertical-align: top;"> tospan</span></p>
<p>giá trị là <span style="vertical-align: text-top"> text-tospan</span></p>
<p>giá trị là <span style="vertical-align: middle;"> middle</span></p>
<p>giá trị là <span style="vertical-align: bottom;"> bottom</span></p>
<p>giá trị là <span style="vertical-align: text-bottom;"> text-bottom</span> </p>
</body>
</html>
