Thuộc tính vertical-align trong CSS

Trang trước
Trang sau  

Thuộc tính vertical-align trong CSS được sử dụng để căn chỉnh phần hiển thị text bên trong một dòng hoặc bên trong một ô bảng theo chiều dọc

Thuộc tính vertical-align có thể nhận giá trị:

  • baseline: đường baseline của phần tử được căn chỉnh với đường baseline của phần tử cha.

  • sub: đường baseline của phần tử được hạ thấp tới vị trí thích hợp để trỏ tới các phần text dạng chỉ số dưới (ví dụ: x2)

  • super: đường baseline của phần tử được tăng lên tới vị trí thích hợp để trỏ tới các phần text dạng chỉ số trên (ví dụ: x2)

  • top: phần trên của Box chứa phần tử được căn chỉnh với phần trên của Line Box, trong ngữ cảnh Inline Context. Với các ô bảng, thì sẽ là phần trên của ô bảng trong Table Context.

  • text-top: phần trên của Box chứa phần tử được căn chỉnh với phần trên của Inline Box cao nhất trong dòng.

  • middle: đường baseline của phần tử được căn chỉnh để trỏ tới đường baseline của phần tử cha cộng với một nửa chiều cao x-height của font của phần tử cha, trong Inline Context.

  • bottom: phần dưới của Box chứa phần tử được căn chỉnh với phần dưới của Line Box trong Inline Box hoặc phần dưới của ô bảng trong Table Context.

  • text-bottom: phần dưới của Box chứa phần tử được căn chỉnh với phần dưới của Inline Box thấp nhất trong dòng.

  • percentage: đường baseline của phần tử được tăng lên hay bị giảm đi theo giá trị phần trăm cho thuộc tính line-height.

  • length: đường baseline của phần tử được tăng lên hay bị giảm đi theo giá trị độ dài này. Thuộc tính vertical-align chấp nhận giá trị âm. Giá trị 0 cho thuộc tính này có cùng hiệu quả như giá trị baseline.

Thuộc tính vertical-align có thể áp dụng cho:

Các phần tử Inline Level và các phần tử hiển thị trong một ô của bảng.

Quảng cáo

Cú pháp thuộc tính vertical-align trong DOM

object.style.verticalAlign = "baseline";

Ví dụ thuộc tính vertical-align trong CSS

Tiếp theo là ví dụ minh họa cách sử dụng của thuộc tính vertical-align trong CSS:

<html>
   <head>
   </head>
   <body>
      <table style="height:200px; width:400px;border:1px solid red;">
         <tr><td style="vertical-align:bottom;" >
            <p>Dong nay se duoc can chinh toi vi tri canh duoi cua o trong bang.</p>
            </td>
         </tr>
      </table>
   </body>
</html>
Quảng cáo

Kết quả là:

Công cụ giáo viên (2048.VN)

Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free

Tạo đề, số hóa đề thi từ PDF/Word/Excel Nhập đề nhanh, trích xuất nội dung tự động. Trộn đề thành nhiều mã, Download/In đề thi offline Tạo nhiều mã đề khác nhau, xuất file hoặc in dễ dàng. Quản lý lớp học Theo dõi học sinh, điểm số và kết quả học tập trực quan. Giao bài tập, tổ chức thi kiểm tra trực tuyến Giao bài, chấm điểm và thống kê kết quả ngay trên hệ thống.
Khám phá công cụ
Trang trước
Trang sau  
Bài viết liên quan