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.

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
}

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;
}
  1. 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;
}
  1. Canh giữa của thành phần với giữa của dòng chứa nó:
div {
  vertical-align: middle;
}
  1. 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;
}

Trả lời

Email 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 *

Contact Me on Zalo
Call now