Cách đặt căn chỉnh dọc (verticalAlign) nội dung trong phần tử bằng JavaScript

Thuộc tính verticalAlign kiểm soát căn chỉnh dọc của phần tử **inline**, **inline-block**, **table-cell**, hoặc **table-caption**. Không tác dụng trên block-level elements (div, p...). Giá trị phổ biến: baseline (mặc định), top, middle, bottom, text-top, text-bottom, sub, super, <length>, <percentage>.

Ví dụ minh họa

Mã sau căn nội dung ô bảng lên trên (top) khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border: 2px solid blue;
      width: 200px;
      height: 200px;
    }
    td {
      border: 1px solid #ccc;
      background: #f5f5f5;
    }
  </style>
</head>
<body>
  <table>
    <tr><td id="myTable">Demo Text 1</td></tr>
    <tr><td>Demo Text 2</td></tr>
    <tr><td>Demo Text 3</td></tr>
  </table>
  <br>
  <button type="button" onclick="setVerticalAlignTop()">Căn trên (top)</button>
  <script>
    function setVerticalAlignTop() {
      document.getElementById("myTable").style.verticalAlign = "top";
      /* Chỉ hoạt động vì td là table-cell */
    }
  </script>
</body>
</html>

Các giá trị phổ biến

Giá trị	Áp dụng cho	Mô tả
`baseline`	inline/inline-block	Căn baseline với parent (mặc định)
`top`	inline/inline-block, table-cell	Căn đỉnh với dòng cao nhất / đỉnh ô
	`middle`	inline/inline-block, table-cell	Căn giữa x-height / giữa ô
`bottom`	inline/inline-block, table-cell	Căn đáy với dòng thấp nhất / đáy ô
`text-top`	inline/inline-block	Căn đỉnh font cha
`text-bottom`	inline/inline-block	Căn đáy font cha
`sub`	inline/inline-block	Hạ chỉ số (subscript)
`super`	inline/inline-block	Thượng chỉ số (superscript)
`<length>`	inline/inline-block	Nâng/hạ theo độ dài (dương = lên)
`<percentage>`	inline/inline-block	% của line-height (dương = lên)

Lưu ý quan trọng:

Không hoạt động trên block elements (div, p, h1...). Dùng Flexbox (align-items), Grid (align-items), hoặc line-height cho text đơn dòng.
table-cell: verticalAlign căn nội dung trong ô (top/middle/bottom).
inline-block: verticalAlign căn phần tử so với dòng văn bản xung quanh.
Kế thừa: Không kế thừa.