Thuộc tính vertical-align CSS

Khuyến nghị khóa học:

Định nghĩa và cách sử dụng

Thuộc tính vertical-align thiết lập cách canh thẳng đứng của phần tử.

Giải thích

Thuộc tính này xác định sự canh thẳng đứng của đường cơ bản của phần tử nội tuyến so với đường cơ bản của dòng mà phần tử này nằm. Cho phép chỉ định giá trị âm và phần trăm. Điều này sẽ làm cho phần tử giảm xuống thay vì tăng lên. Trong các ô bảng, thuộc tính này sẽ thiết lập cách đối齡 nội dung của ô trong khung ô.

Xem thêm:CSS văn bản

Hướng dẫn CSS:Hướng dẫn tham khảo HTML DOM:

Thuộc tính verticalAlign

Ví dụ

Canh hình ảnh thẳng đứng:
  img
  {
  vertical-align:text-top;

}

Thử ngay

Ngữ pháp CSSlengthvertical-align: baseline|

Giá trị thuộc tính|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Giá trị Mô tả
baseline Mặc định. Phần tử được đặt trên đường cơ bản của phần tử cha.
sub Canh thẳng đứng văn bản dưới dấu phẩy.
super Canh thẳng đứng văn bản trên dấu phẩy
top Canh đỉnh trên của phần tử với đỉnh trên của phần tử cao nhất trong dòng.
text-top Canh đỉnh trên của phần tử với đỉnh trên của phông chữ của phần tử cha.
middle Đặt phần tử này ở giữa phần tử cha.
bottom Canh đỉnh trên của phần tử với đỉnh trên của phần tử thấp nhất trong dòng.
text-bottom Canh đỉnh dưới của phần tử với đỉnh dưới của phông chữ của phần tử cha.
length 　
% Sắp xếp phần tử này bằng cách sử dụng phần trăm của giá trị thuộc tính "line-height" của phần tử. Cho phép sử dụng giá trị âm.
inherit Định nghĩa rằng giá trị của thuộc tính vertical-align nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: baseline
Thừa kế: no
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.verticalAlign="bottom"

Các ví dụ khác

Canh hình ảnh thẳng đứng
Ví dụ này trình bày cách sắp xếp hình ảnh thẳng đứng trong văn bản.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0