Căn chỉnh theo chiều dọc html td
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 quanGiá trị ban đầu 1Áp dụng cho các phần tử cấp độ nội tuyến và 'ô bảng'Kế thừaKhông có Phương tiệnGiá trị được tính Thuộc tính mô hình đối tượng CSS cú pháp
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ành 12 thì tương đương với 1. Tăng hoặc giảm nội dung theo độ dài đã chỉ định. 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ành 12 thì tương đương với 1. top Căn chỉnh theo chiều dọc nội dung và phần con của nó lên đầu dòng văn bản. dưới cùng Căn chỉnh theo chiều dọc nội dung và phần con của nó ở dưới cùng của dòng văn bảnví dụVí dụ này sử dụng thuộc tính 16 để căn chỉnh văn bản trong một ô của bảng
Xem ví dụ trực tiếp thông số kỹ thuật liên quanCSS Cấp 2 (Bản sửa đổi 1)Đề xuấtThuộc tínhThay đổi căn chỉnh của các phần tử bằng tiện ích 7. Xin lưu ý rằng căn dọc chỉ ảnh hưởng đến các thành phần ô nội tuyến, khối nội tuyến, bảng nội tuyến và bảngChọn từ 8, 9, 0, 1, 2 và 3 nếu cầnVớ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
Với các ô của bảng baselinetopmiddlebottomtext-toptext-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, 4 trên 5 thực hiện những gì được mong đợi ở nó. Nghĩa là, căn chỉnh 5 vào giữa hàng đó và toàn bộ nội dung của 5 vào giữa theo chiều dọc (theo mặc định) để lại các khoảng cách bằng nhau ở trên cùng và dưới cùng
Tính chiều cao hàng
Kết quả là ở trên, chiều cao của 9 và 5 trở thành 100px nhưng hộp ô chỉ chiếm số lượng chiều cao theo yêu cầu của nội dung (chiều cao 1 = 43px). Bây giờ vì hộp Ô nhỏ hơn chiều cao của hàng, phần đệm bổ sung được thêm vào như trong Hộp 5 của hình trên và do đó làm cho nội dung cũng được căn chỉnh ở giữaTD chỉ có hình ảnh Khi chỉ có một 1, chiều cao nội dung bằng với chiều cao của 1. Vì vậy, nó được định vị ở giữaNhư có thể thấy trong hình trên, điều này không yêu cầu rõ ràng 6 trên 1 vì 5 căn chỉnh nội dung của nó ở giữaTD chỉ có dữ liệu nội tuyến Khi 5 chỉ có 6 hoặc 6 cộng với một dòng 8, chiều cao của nội dung bằng với mặc định 9 cho văn bản (hoặc bất kỳ 9 được chỉ định nào). Trong trường hợp này cũng vậy, 5 căn chỉnh chính xácKhi 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 5 sẽ tự động đẩy 43 (được đánh dấu bằng nền màu lục lam) lên trên để đảm bảo rằng toàn bộ nội dung được căn chỉnh ở giữa (không chỉ một TD có một hình ảnh và một nhịp Khi chúng tôi đặt một 1 và một 6 (văn bản trong dòng) trong 5, chiều cao nội dung sẽ bằng chiều cao của 1 cộng với 9 của dòng thứ hai và dòng tiếp theoTrong 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ẻ 1 không có 50 được chỉ địnhTrong trường hợp này, 1 được căn chỉnh theo 52 (mặc định). Sau đó, 5 căn chỉnh toàn bộ nội dung vào giữa. Điều này có nghĩa là 5 rời đi vào khoảng 28. Khoảng cách 5px (= (100-43)/2) ở đầu và cuối nội dung. Một lần nữa, 50 trên 5 thực hiện công việc, nó đặt nội dung ở giữa (nghĩa là để khoảng cách bằng nhau ở trên và dưới). Nhưng văn bản bị đẩy xuống vì chiều cao của 1 lớn hơnNếu chúng ta giảm chiều cao của 1 xuống thấp hơn chiều cao của dòng (giả sử là 10px), chúng ta có thể thấy rằng ngay cả với 1 + 6, nó vẫn được căn chỉnh ở giữaTrường hợp 2 - thẻ 1 có 6Trong trường hợp này, 50 trên 5 cũng thực hiện tương tự như những gì đã làm đối với Trường hợp 1. Tuy nhiên, văn bản trong trường hợp này nằm gần giữa vì 1 cũng được căn chỉnh với 56 của dòng |