Thuộc tính vertical-align trong CSS
Bùi Tấn Lực - 905
- 01/10/2025
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>
Vertical-align thường được dùng trong những trường hợp nào?
Trong CSS, vertical-align phát huy tác dụng rõ nhất khi làm việc với nội dung dạng inline, inline-block hoặc các ô trong bảng. Việc xác định đúng ngữ cảnh giúp tránh tình trạng áp dụng thuộc tính nhưng phần tử không thay đổi vị trí như mong muốn.
Căn chỉnh nội dung trong ô của bảng
Với bảng HTML, vertical-align thường được dùng để đưa nội dung lên trên, xuống dưới hoặc giữ ở giữa theo chiều dọc của ô. Điều này đặc biệt hữu ích khi các ô có chiều cao khác nhau và cần giữ bố cục đồng nhất.
<table>
<tr>
<td style="vertical-align: top;">Nội dung phía trên</td>
<td style="vertical-align: middle;">Nội dung ở giữa</td>
<td style="vertical-align: bottom;">Nội dung phía dưới</td>
</tr>
</table>
Cách này phù hợp với các bảng dữ liệu, bảng thông tin hoặc khu vực có nhiều dòng nội dung nhưng vẫn muốn kiểm soát vị trí theo chiều dọc.
Căn chỉnh hình ảnh với văn bản
Khi hình ảnh nằm cùng dòng với văn bản, vertical-align có thể điều chỉnh vị trí của hình so với dòng chữ. Đây là trường hợp thường gặp với biểu tượng nhỏ, hình ảnh minh họa hoặc icon đặt cạnh nội dung.
<p>
<img src="icon.png" alt="Icon" style="vertical-align: middle;">
Nội dung được đặt cạnh hình ảnh
</p>
Giá trị middle có thể giúp hình ảnh nằm cân đối hơn với phần chữ xung quanh. Tùy kiểu thiết kế, có thể thay đổi sang các giá trị khác để đạt vị trí phù hợp.
Căn chỉnh các phần tử inline và inline-block
Với các phần tử inline và inline-block nằm trên cùng một dòng, vertical-align cho phép điều chỉnh cách chúng liên kết theo chiều dọc. Điều này hữu ích khi một phần tử có kích thước hoặc chiều cao dòng khác với phần tử bên cạnh.
<span style="display: inline-block; vertical-align: middle;">
Nội dung 1
</span>
<span style="display: inline-block; vertical-align: middle;">
Nội dung 2
</span>
Cách sử dụng này giúp kiểm soát sự cân bằng giữa các thành phần trên cùng một dòng mà không cần thay đổi cấu trúc HTML. Tuy nhiên, vertical-align không phải là công cụ căn giữa theo chiều dọc cho mọi loại phần tử; với bố cục Flexbox hoặc Grid, nên sử dụng các thuộc tính phù hợp với từng hệ thống bố cục.
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 *
