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:
- 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; }