vertical-align trong css

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.

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

• Map trong lập trình Dart
• căn giữa trong html
• Đối số dòng lệnh trong GOLang
• User Management Commands trong MongoDB
• Forms trong Laravel

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
}

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:

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

span {
  vertical-align: baseline;
}

2. 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;
}

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

div {
  vertical-align: middle;
}

4. 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;
}