Bùi Tấn Lực - 134
- 01/10/2025
Bùi Tấn Lực Thuộc tính vertical-align trong CSS thường dùng để canh phần tử HTML có kích thước nhỏ theo chiều dọc so với các chữ có trên một hàng, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính vertical-align trong CSS
Chức năng của Thuộc tính vertical-align trong CSS
Thuộc tính vertical-align trong CSS thường dùng để canh phần tử HTML có kích thước nhỏ theo chiều dọc so với các chữ có trên một hàng.
Cú pháp của Thuộc tính vertical-align trong CSS
vertical-align: giatri;
giatri: Giá trị để canh phần tử HTML có kích thước nhỏ theo chiều dọc so với các chữ có trên một hàng (Ví dụ: super, text-top, top, text-bottom, bottom, -webkit-baseline-middle, sub, baseline, middle)
Các giá trị của Thuộc tính vertical-align trong CSS
super: Canh chữ nhỏ nằm trên các chữ trong hàng, trên cả text-top và top.
text-top: Canh chữ nhỏ nằm trên các chữ trong hàng,bằng top và thấp hơn super.
top: Canh chữ nhỏ nằm trên các chữ trong hàng,bằng text-top và thấp hơn super.
text-bottom: Canh chữ nhỏ nằm dưới các chữ trong hàng.
bottom: Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả text-bottom.
-webkit-baseline-middle: Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả bottom.
sub: Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả -webkit-baseline-middle.
baseline: Canh chữ nhỏ nằm giữa các chữ trong hàng.
middle: Canh chữ nhỏ nằm giữa các chữ trong hàng.
Code Thuộc tính vertical-align trong CSS
vertical-align:super;
(Canh chữ nhỏ nằm trên các chữ trong hàng, trên cả text-top và top )
vertical-align:text-top;
(Canh chữ nhỏ nằm trên các chữ trong hàng,bằng top và thấp hơn super )
vertical-align:top;
(Canh chữ nhỏ nằm trên các chữ trong hàng,bằng text-top và thấp hơn super )
vertical-align:text-bottom;
(Canh chữ nhỏ nằm dưới các chữ trong hàng)
vertical-align:bottom;
(Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả text-bottom)
vertical-align:-webkit-baseline-middle;
(Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả bottom)
vertical-align:sub;
(Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả -webkit-baseline-middle)
vertical-align:baseline;
(Canh chữ nhỏ nằm giữa các chữ trong hàng)
vertical-align:middle;
(Canh chữ nhỏ nằm giữa các chữ trong hàng)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính vertical-align trong CSS</title>
<style>
p{background:#000;color:#fff; padding:10px}
span{font-size:10px;background:red}
</style>
</head>
<body>
<h1>Code Thuộc tính vertical-align trong CSS</h1>
<div>Dùng để canh phần tử HTML có kích thước nhỏ theo chiều dọc so với các chữ có trên một hàng:</div>
<p>vertical-align:<span style="vertical-align:super" >super</span> (Canh chữ nhỏ nằm trên các chữ trong hàng, trên cả text-top và top )</p>
<p>vertical-align:<span style="vertical-align:text-top" >text-top</span> (Canh chữ nhỏ nằm trên các chữ trong hàng,bằng top và thấp hơn super )</p>
<p>vertical-align:<span style="vertical-align:top" >top</span> (Canh chữ nhỏ nằm trên các chữ trong hàng,bằng text-top và thấp hơn super )</p>
<p>vertical-align:<span style="vertical-align:text-bottom" >text-bottom</span> (Canh chữ nhỏ nằm dưới các chữ trong hàng)</p>
<p>vertical-align:<span style="vertical-align:bottom" >bottom</span> (Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả text-bottom)</p>
<p>vertical-align:<span style="vertical-align:-webkit-baseline-middle" >-webkit-baseline-middle</span> (Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả bottom)</p>
<p>vertical-align:<span style="vertical-align:sub" >sub</span> (Canh chữ nhỏ nằm dưới các chữ trong hàng, dưới cả -webkit-baseline-middle)</p>
<p>vertical-align:<span style="vertical-align:baseline" >baseline</span> (Canh chữ nhỏ nằm giữa các chữ trong hàng)</p>
<p>vertical-align:<span style="vertical-align:middle" >middle</span> (Canh chữ nhỏ nằm giữa các chữ trong hàng)</p>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính vertical-align trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
