Thuộc tính verticalAlign của HTML DOM Style

Thuộc tính style.verticalAlign trong HTML DOM trả về hoặc thiết lập căn chỉnh dọc của nội dung bên trong một phần tử HTML. Thuộc tính này thường được sử dụng cho các phần tử nội tuyến (inline), bảng (table-cell) hoặc hình ảnh.

Cú pháp

Lấy giá trị verticalAlign

object.style.verticalAlign

Thiết lập giá trị verticalAlign

object.style.verticalAlign = "giá_trị"

Các giá trị hợp lệ

Giá trị	Mô tả
initial	Đặt thuộc tính về giá trị mặc định.
inherit	Kế thừa giá trị từ phần tử cha.
length	Nâng/giảm phần tử một khoảng cách cụ thể (px, em, cm...).
percentage(%)	Nâng/giảm phần tử theo phần trăm của thuộc tính line-height.
baseline	Căn baseline của phần tử với baseline của phần tử cha (mặc định).
sub	Căn phần tử như chỉ số dưới (subscript).
super	Căn phần tử như chỉ số trên (superscript).
top	Căn đỉnh phần tử với đỉnh phần tử cao nhất trên dòng.
text-top	Căn đỉnh phần tử với đỉnh font của phần tử cha.
middle	Căn giữa phần tử với phần tử cha.
bottom	Căn đáy phần tử với phần tử thấp nhất trên dòng.
text-bottom	Căn đáy phần tử với đáy font của phần tử cha.

Ví dụ minh họa

Ví dụ dưới đây thay đổi căn chỉnh dọc của nội dung trong ô bảng khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
  }
  table {
    border: 2px solid #fff;
    height: 150px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính DOM Style verticalAlign</h1>
<table>
  <tr>
    <td id="myTd">Dữ liệu bảng</td>
  </tr>
</table>
<button onclick="doiCanhChinh()" class="btn">Đặt verticalAlign = top</button>
<script>
  function doiCanhChinh() {
    document.querySelector('td').style.verticalAlign = "top";
  }
</script>
</body>
</html>

Kết quả

Ban đầu nội dung ô bảng căn giữa theo mặc định. Sau khi nhấn nút, nội dung sẽ được căn lên đỉnh ô.

Mẹo: Thuộc tính này hoạt động tốt nhất với display: table-cell, inline-block, hoặc các phần tử <img>.