Rate this post

vertical-align là một thuộc tính trong CSS dùng để xác định vị trí theo chiều dọc của một thành phần trong một dòng.

Tóm tắt nội dung

Trình duyệt hỗ trợ

Thuộc tính vertical-align trong CSS được hỗ trợ bởi hầu hết các trình duyệt hiện nay, bao gồm:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

Tuy nhiên, một số phiên bản trình duyệt cũ hơn có thể không hỗ trợ đầy đủ hoặc không hỗ trợ hoàn toàn thuộc tính này. Nếu cần sử dụng thuộc tính vertical-align, bạn nên kiểm tra xem trình duyệt của mình có hỗ trợ hay không.

Xem thêm Tìm hiểu về Relative Layout

Vertical align trong css là gì?

Là một thuộc tính trong CSS được sử dụng để căn chỉnh vị trí của một phần tử theo chiều dọc. Nó áp dụng cho các phần tử inline và table-cell. Thuộc tính này cho phép bạn chọn một trong các giá trị định sẵn để căn chỉnh phần tử theo chiều dọc, chẳng hạn như căn giữa, căn trên, căn dưới hoặc căn dọc theo đường chữ.

Các bài viết liên quan;

Các giá trị của vertical-align bao gồm:

baseline: Canh đáy của thành phần với đáy của dòng chứa nó.
top: Canh trên cùng của thành phần với trên cùng của dòng chứa nó.
middle: Canh giữa của thành phần với giữa của dòng chứa nó.
bottom: Canh dưới cùng của thành phần với dưới cùng của dòng chứa nó.
text-top: Canh trên cùng của thành phần với trên cùng của ký tự trong dòng chứa nó.
text-bottom: Canh dưới cùng của thành phần với dưới cùng của ký tự trong dòng chứa nó.
<length>: Sử dụng giá trị khoảng cách để thiết lập vị trí theo chiều dọc của thành phần. Ví dụ: ’10px’.
<percentage>: Sử dụng giá trị tỷ lệ phần trăm để thiết lập vị trí theo chiều dọc của thành phần. Ví dụ: ‘50%’.

Ví dụ:

/* Align the text to the middle of the parent element */
span {
  vertical-align: middle;
}

/* Move the image 10px from the top of the parent element */
img {
  vertical-align: -10px
}

Xem thêm Hướng dẫn cài đặt XAMPP(Mở trong cửa số mới)

Các giá trị của thuộc tính trong vertical align

Thuộc tính vertical-align trong CSS được sử dụng để căn chỉnh văn bản hoặc phần tử con theo chiều dọc trong khối cha.

Các giá trị của thuộc tính này bao gồm:

baseline:

Căn chỉnh văn bản theo đường cơ sở (baseline) của phần tử cha.

Là giá trị của thuộc tính vertical-align trong CSS, được sử dụng để căn chỉnh đối tượng theo đường baseline của văn bản. Đường baseline là một đường ảo mà các ký tự trong văn bản được căn chỉnh theo. Khi đối tượng được đặt trên baseline, phần dưới của nó sẽ đặt trên đường baseline và phần trên của nó sẽ được căn chỉnh trên đường baseline.

vertical-align: baseline;

Giá trị mặc định của thuộc tính vertical-align là baseline

sub:

Căn chỉnh phần tử con dưới cùng theo đường baseline của phần tử cha, tương đương với giá trị của ký tự subscript (ký tự dưới). Khi sử dụng giá trị này, văn bản sẽ được hiển thị nhỏ hơn so với kích thước bình thường và được căn chỉnh về phía dưới.

super:

Căn chỉnh phần tử con trên cùng theo đường baseline của phần tử cha, theo hướng từ trên xuống dưới, dựa trên baseline của phần tử cha. Nếu sử dụng giá trị super, nội dung của phần tử sẽ được căn chỉnh lên trên so với baseline của phần tử cha.

span.sub {
  vertical-align: sub;
}

span.super {
  vertical-align: super;
}

<p>Chiều cao của <span class="sub">vị trí dưới</span> và <span class="super">vị trí trên</span> sẽ được điều chỉnh.</p>

top:

Căn chỉnh phần tử con theo đỉnh của phần tử cha. Khi sử dụng giá trị top, phần tử con sẽ được căn chỉnh sao cho phía trên của phần tử con sát với phía trên của phần tử cha.

middle:

Căn chỉnh văn bản, hình ảnh, hay phần tử khác theo chiều dọc sao cho nằm chính giữa phần tử chứa nó. Nếu là văn bản thì sẽ căn giữa theo đường baseline của văn bản, nếu là hình ảnh thì căn giữa theo chiều cao của hình ảnh.

bottom:

Căn chỉnh đối tượng theo chiều dọc (vertical alignment) với phần dưới nhất của phần tử cha. Khi áp dụng giá trị bottom, đối tượng sẽ được căn chỉnh sao cho phần dưới của nó tiếp xúc với đường chân trời của phần tử cha.

div.container {
  height: 200px;
  border: 1px solid black;
}

span.top {
  vertical-align: top;
}

span.middle {
  vertical-align: middle;
}

span.bottom {
  vertical-align: bottom;
}

<div class="container">
  <span class="top">Văn bản ở trên cùng</span><br>
  <span class="middle">Văn bản ở giữa</span><br>
  <span class="bottom">Văn bản ở dưới cùng</span>
</div>

text–top:

Căn chỉnh đối tượng với vị trí của văn bản trên đường baseline của phông chữ. Khi sử dụng text-top, đối tượng sẽ được căn chỉnh sao cho đường trên của nó bằng với đường trên của văn bản, dù đó là chữ in hoa hay chữ in thường.

Nó thường được sử dụng để căn chỉnh các hình ảnh, biểu tượng hoặc ký hiệu với văn bản tương ứng, để đảm bảo chúng nằm trong cùng một hàng với văn bản đó.

text–bottom:

Căn chỉnh các phần tử theo chiều dọc (theo trục y) của văn bản, nơi mà nội dung của phần tử bắt đầu.

Giá trị text-bottom được sử dụng để căn chỉnh đối tượng về phía dưới của đường baseline của văn bản. Nó được sử dụng thường xuyên để căn chỉnh các hình ảnh, biểu tượng, văn bản, v.v. sao cho chúng nằm ở dưới đường baseline của văn bản.

Ví dụ, nếu bạn có một phần tử hình ảnh và muốn căn chỉnh nó xuống phía dưới của đường baseline, bạn có thể sử dụng giá trị text-bottom cho thuộc tính vertical-align.

div.container {
  font-size: 20px;
  line-height: 1.5;
}

span.text-top {
  vertical-align: text-top;
}

span.text-bottom {
  vertical-align: text-bottom;
}

<div class="container">
  <span>Đây là một đoạn <span class="text-top">văn bản ở trên</span> và <span class="text-bottom">văn bản ở dưới</span>.</span>
</div>

Xem thêm Slice trong GOLang

Một số ví dụ vertical-align trong css

Dưới đây là một số ví dụ về cách sử dụng thuộc tính vertical-align trong CSS:

Canh đáy của thành phần với đáy của dòng chứa nó:

span {
  vertical-align: baseline;
}

Canh trên cùng của thành phần với trên cùng của dòng chứa nó:

img {
  vertical-align: top;
}

Canh giữa của thành phần với giữa của dòng chứa nó:

div {
  vertical-align: middle;
}

Canh dưới cùng của thành phần với dưới cùng của dòng chứa nó:

p {
  vertical-align: bottom;
}

Tổng kết

Trong CSS, thuộc tính vertical-align được sử dụng để căn chỉnh vị trí của một phần tử theo chiều dọc. Cú pháp của thuộc tính này là vertical-align: value, trong đó value là giá trị căn chỉnh mong muốn.

Tùy thuộc vào tình huống và yêu cầu của thiết kế, người lập trình có thể lựa chọn các giá trị khác nhau của vertical-align để đạt được kết quả mong muốn.

CSS

Vertical-align trong css

Trình duyệt hỗ trợ

Vertical align trong css là gì?

Các giá trị của thuộc tính trong vertical align

Một số ví dụ vertical-align trong css

Tổng kết

Trả lời Hủy