Thuộc tính vertical-align trong CSS

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ụ: x₂)
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ụ: x²)
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ó app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: