Thuộc tính HTML DOM style verticalAlign trả về và sửa đổi căn chỉnh theo chiều dọc của nội dung của phần tử HTML trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại chiều dọcAlign
object.style.verticalAlign
-
Sửa đổi verticalAlign
object.style.verticalAlign = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| chiều dài | Tăng hoặc giảm một phần tử theo độ dài cụ thể. |
| phần trăm (%) | Nó tăng hoặc giảm một phần tử theo tỷ lệ phần trăm của thuộc tính line-height. |
| đường cơ sở | Nó căn chỉnh đường cơ sở của một phần tử với đường cơ sở của phần tử mẹ của nó. |
| phụ | Nó căn chỉnh phần tử dưới dạng chỉ số con. |
| siêu | Nó căn chỉnh phần tử dưới dạng chỉ số trên. |
| đầu | Nó căn chỉnh phần trên cùng của phần tử với phần trên của phần tử cao nhất trên dòng. |
| text-top | Nó căn chỉnh phần trên cùng của phần tử với phần trên cùng của phông chữ phần tử gốc. |
| giữa | Nó căn chỉnh phần tử ở giữa phần tử mẹ. |
| dưới cùng | Nó căn chỉnh phần dưới cùng của phần tử với phần tử thấp nhất trên dòng. |
| text-bottom | Nó căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của phông chữ phần tử gốc. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính HTML style verticalAlign -
<!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>DOM Style verticalAlign Property Example</h1>
<table>
<tr>
<td id="myTd">Table Data</td>
</tr>
</table>
<button onclick="add()" class="btn">Set verticalAlign</button>
<script>
function add() {
document.querySelector('td').style.verticalAlign = "top";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt dọcAlign ”Để điều chỉnh căn chỉnh theo chiều dọc của văn bản -
