CSS Vertical Align – Cách sử dụng Vertical Align trong CSS

Posted by Lập Trình Viên CSS 7 phút đọc

CSS Vertical Align là một thuộc tính của CSS được sử dụng để xác định sự căn chỉnh theo chiều dọc của một phần tử lồng nhau hoặc một ô trong bảng. Đây là một trong những thuộc tính dễ hiểu của CSS, tuy nhiên không đơn giản cho các nhà phát triển mới bắt đầu. Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng và ưu nhược điểm của CSS Vertical Align.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Vertical Align là gì ?

Thuộc tính CSS Vertical Align được sử dụng để căn chỉnh các phần tử trong một phần tử cha theo chiều dọc. Khi áp dụng thuộc tính này, các phần tử có thể được căn chỉnh ở trung tâm, trên hoặc dưới của phần tử cha. Thuộc tính này áp dụng cho các phần tử inline hoặc table-cell.

CSS Vertical Align ảnh hưởng đến việc căn chỉnh phần tử đó chứ không ảnh hưởng đến nội dung của phần tử (trừ khi áp dụng cho ô bảng). Khi áp dụng cho ô bảng, nó ảnh hưởng đến nội dung của ô đó chứ không ảnh hưởng đến ô đó.

CSS Vertical Align là thuộc tính hữu ích cho những người muốn căn chỉnh các phần tử trong một phần tử cha theo chiều dọc. Nó được sử dụng rộng rãi trong thiết kế trang web, ví dụ như khi bạn muốn căn chỉnh văn bản và hình ảnh trong cùng một hàng hoặc khi bạn muốn căn chỉnh nội dung của ô bảng.

Hướng dẫn CSS Vertical Align

Để sử dụng CSS Vertical Align, bạn cần biết các giá trị được hỗ trợ bởi thuộc tính này. Dưới đây là danh sách các giá trị:

  • Baseline: Căn chỉnh phần tử theo đường baseline của phần tử cha. Đây là giá trị mặc định.
  • Length: Tăng hoặc giảm chiều dài của phần tử bởi chiều dài được chỉ định. Giá trị âm cũng được cho phép.
  • %: Tăng hoặc giảm chiều cao của phần tử theo một phần trăm của thuộc tính “line-height”. Giá trị âm cũng được cho phép.
  • Sub: Căn chỉnh phần tử như nó là một phần tử subscript.
  • Super: Căn chỉnh phần tử như nó là một phần tử superscript.
  • Top: Căn chỉnh đỉnh của phần tử với đỉnh của phần tử cao nhất trên dòng.
  • Bottom: Căn chỉnh đáy của phần tử với đáy của phần tử thấp nhất trên dòng.
  • Text-top: Căn chỉnh đỉnh của phần tử với chữ in của phần tử cha.
  • Middle: Đặt phần tử ở giữa phần tử cha.
  • Text-bottom: Căn chỉnh đáy của phần tử với chữ in của phần tử cha.
  • Initial: Đặt thuộc tính này thành giá trị ban đầu của nó.
  • Inherit: Kế thừa giá trị của thuộc tính từ phần tử cha của nó.

Để áp dụng CSS Vertical Align, bạn có thể sử dụng cú pháp sau:

selector {
  vertical-align: value;
}

Ví dụ, để căn chỉnh một hình ảnh với giá trị “text-top”, bạn có thể sử dụng mã CSS sau:

<img src="https://example.com/image.jpg" alt="Image" style="vertical-align: text-top;">

Ví dụ cụ thể:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img.top {  
    vertical-align: text-top;  
}  
img.bottom {  
    vertical-align: text-bottom;  
}  
</style>  
</head>  
<body>  
<p><img src="good-morning.jpg" alt="Good Morning Friends"/> This is an image with a default alignment.</p>   
<p><img src="good-morning.jpg" class="top" alt="Good Morning Friends"/> This is an image with a text-top alignment.</p>   
<p><img src="good-morning.jpg" class="bottom" alt="Good Morning Friends"/> This is an image with a text-bottom alignment.</p>  
</body>  
</html>

Kết Quả:

Ưu và Nhược điểm CSS Vertical Align

CSS Vertical Align có những ưu và nhược điểm riêng. Hãy tìm hiểu chúng:

Ưu điểm của CSS Vertical Align

  • Có thể căn chỉnh các phần tử trong một phần tử cha theo chiều dọc một cách dễ dàng.
  • Giúp tăng tính thẩm mỹ cho trang web bằng cách tạo ra một bố cục chuyên nghiệp.

Nhược điểm của CSS Vertical Align

  • Không hoạt động tốt với các phần tử block-level.
  • Có thể gặp vấn đề khi sử dụng trên các trình duyệt khác nhau.

Lời khuyên CSS Vertical Align

Dưới đây là một số lời khuyên khi sử dụng CSS Vertical Align:

  • Sử dụng CSS Vertical Align kết hợp với các thuộc tính khác để tạo ra một bố cục chuyên nghiệp cho trang web của bạn.
  • Không sử dụng CSS Vertical Align với các phần tử block-level, hãy sử dụng thuộc tính display và margin thay thế.
  • Kiểm tra xem trang web của bạn hiển thị đúng trên các trình duyệt khác nhau.

CSS Vertical Align áp dụng cho loại phần tử nào?

CSS Vertical Align áp dụng cho các phần tử inline hoặc table-cell.

Giá trị mặc định của CSS Vertical Align là gì?

Giá trị mặc định của CSS Vertical Align là “baseline”.

Làm thế nào để sử dụng CSS Vertical Align trong mã HTML?

Bạn có thể sử dụng thuộc tính style trong thẻ HTML để áp dụng CSS Vertical Align.

Có bao nhiêu giá trị được hỗ trợ bởi CSS Vertical Align?

CSS Vertical Align hỗ trợ 11 giá trị khác nhau.

CSS Vertical Align có ưu điểm gì?

CSS Vertical Align có thể giúp căn chỉnh các phần tử theo chiều dọc một cách dễ dàng và tăng tính thẩm mỹ cho trang web.