Thuộc tính vertical-align kiểm soát cách các thành phần nội tuyến hoặc văn bản được căn chỉnh theo chiều dọc so với đường cơ sở. Nếu thuộc tính này được sử dụng trên các ô của bảng, nó sẽ kiểm soát việc căn chỉnh nội dung của ô trong bảng theo chiều dọc
bảng tổng quan
Giá trị ban đầubaseline
top
middle
bottom
text-top
text-bottomGiá trị được tính
.
Thuộc tính mô hình đối tượng CSS
.
cú pháp
2baseline top middle bottom text-top text-bottom
2baseline top middle bottom text-top text-bottom
4baseline top middle bottom text-top text-bottom
5baseline top middle bottom text-top text-bottom
6baseline top middle bottom text-top text-bottom
7baseline top middle bottom text-top text-bottom
8baseline top middle bottom text-top text-bottom
9baseline top middle bottom text-top text-bottom
10baseline top middle bottom text-top text-bottom
11baseline top middle bottom text-top text-bottom
giá trị
đường cơ sởMặc định. Căn chỉnh nội dung theo chiều dọc với đường cơ sở của nội dung gốc. giữa Căn chỉnh nội dung theo chiều dọc ở giữa phần gốc của nó. subVertally căn chỉnh nội dung với chỉ số dưới. super Căn chỉnh nội dung theo chiều dọc theo chỉ số trên. chuyển văn bản sang Căn chỉnh nội dung theo chiều dọc lên trên cùng của nội dung gốc. text-bottom Căn chỉnh nội dung theo chiều dọc ở dưới cùng của phần gốc của nó. Tăng hoặc giảm nội dung theo tỷ lệ phần trăm của chiều cao dòng. Nếu giá trị này được đặt thành số dương, nội dung sẽ được nâng lên so với đường cơ sở của nội dung gốc. Nếu giá trị này được đặt thành số âm, nội dung sẽ bị hạ thấp so với đường cơ sở của nội dung gốc. Nếu đặt thànhbaseline
top
middle
bottom
text-top
text-bottombaseline
top
middle
bottom
text-top
text-bottombaseline
top
middle
bottom
text-top
text-bottombaseline
top
middle
bottom
text-top
text-bottomví dụ
Ví dụ này sử dụng thuộc tính
baseline
top
middle
bottom
text-top
text-bottom
Top aligned
Middle aligned
Bottom aligned
Xem ví dụ trực tiếp
thông số kỹ thuật liên quan
CSS Cấp 2 [Bản sửa đổi 1]Đề xuấtThuộc tính
Thay đổi căn chỉnh của các phần tử bằng tiện ích
baseline
top
middle
bottom
text-top
text-bottom
Chọn từ
baseline
top
middle
bottom
text-top
text-bottom
baseline
top
middle
bottom
text-top
text-bottom
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Với các yếu tố nội tuyến
đường cơ sở trên cùng ở giữa dưới cùng văn bản trên cùng văn bản dưới cùng
baseline
top
middle
bottom
text-top
text-bottomVới các ô của bảng
baselinetopmiddlebottomtext-toptext-bottom
baseline
top
middle
bottom
text-top
text-bottom
Có thể thay đổi căn chỉnh ngang của các mục trong các ô của bảng. Dữ liệu bảng mặc định căn trái; . Để thay đổi căn chỉnh trong một ô, hãy chèn thuộc tính "ALIGN=" thích hợp trong mã cho ô đó. Để thay đổi căn chỉnh trong tất cả các ô trong một hàng, hãy chèn thuộc tính căn chỉnh thích hợp trong mã cho hàng đó. Ví dụ đầu tiên dưới đây cho thấy một số cách sử dụng thuộc tính căn chỉnh ngang
Có thể thay đổi căn chỉnh dọc của các mục trong các ô của bảng. Dữ liệu sẽ mặc định ở giữa theo chiều dọc của ô trừ khi thêm mã bổ sung. Để đặt một mục ở đầu hoặc cuối ô của nó, hãy chèn thuộc tính "VALIGN=" trong mã cho ô đó. Để căn chỉnh theo chiều dọc toàn bộ một hàng [e. g. , đặt tất cả dữ liệu trong hàng đó ở đầu ô], hãy chèn thuộc tính "VALIGN=" trong mã cho hàng đó. Ví dụ thứ hai dưới đây cho thấy một số cách sử dụng thuộc tính căn chỉnh dọc
Trong tất cả các trường hợp,
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Đây là những gì W3 Spec nói về
6baseline top middle bottom text-top text-bottomTâm của ô được căn chỉnh với tâm của các hàng mà nó kéo dài
Tính chiều cao hàng
Chiều cao của hộp phần tử 'bảng-hàng' được tính sau khi tác nhân người dùng có sẵn tất cả các ô trong hàng. nó là giá trị tối đa của 'chiều cao' được tính toán của hàng, 'chiều cao' được tính toán của từng ô trong hàng và chiều cao tối thiểu [MIN] mà các ô yêu cầu
Trong CSS2. 1, chiều cao của ô ô là chiều cao tối thiểu mà nội dung yêu cầu. Thuộc tính 'chiều cao' của ô trong bảng có thể ảnh hưởng đến chiều cao của hàng [xem bên trên], nhưng nó không làm tăng chiều cao của hộp ô
Các hộp ô nhỏ hơn chiều cao của hàng sẽ nhận thêm phần đệm trên hoặc dưới
Kết quả là ở trên, chiều cao của
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
TD chỉ có hình ảnh
Khi chỉ có một
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Như có thể thấy trong hình trên, điều này không yêu cầu rõ ràng
baseline
top
middle
bottom
text-top
text-bottom
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
TD chỉ có dữ liệu nội tuyến
Khi
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Khi nội dung văn bản vượt ra ngoài dòng đầu tiên [tham khảo bản demo], bạn có thể thấy rằng
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
TD có một hình ảnh và một nhịp
Khi chúng tôi đặt một
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Trong tình huống này, có hai trường hợp có thể xảy ra như mô tả bên dưới
Trường hợp 1 - thẻ
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Trong trường hợp này,
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Nếu chúng ta giảm chiều cao của
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
Trường hợp 2 - thẻ
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
baseline
top
middle
bottom
text-top
text-bottomTrong trường hợp này,
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......
aaa
aaa
aaa
aaa aaaaaaa aaaaaaaa aaaaaaaa
Case 1
Image + Span
Case 1
Image + Span
Case 2
Image + Span
Image + Span + more text.......
Case 3
Image + Span text...
Image + Span + more text.......