Cách định vị các phần tử web với căn chỉnh dọc CSS
CSS cung cấp một số thuộc tính căn chỉnh. Thuộc tính căn chỉnh văn bản, giới hạn ở các phần tử khối và ô bảng, mô tả căn chỉnh theo chiều ngang. Ngược lại, thuộc tính căn chỉnh theo chiều dọc chỉ áp dụng cho các phần tử nội tuyến và ô bảng.
Bạn có thể sử dụng nhiều giá trị khác nhau để kiểm soát căn chỉnh theo chiều dọc. Một số liên quan đến phần tử mẹ, một số khác với phần tử hiển thị trên cùng một đường ngang. Tìm hiểu chính xác cách bạn có thể sử dụng căn chỉnh theo chiều dọc trong các tình huống khác nhau, để đạt được vị trí chính xác.
Mục Lục
Các giá trị căn chỉnh theo chiều dọc khác nhau
Thuộc tính căn chỉnh theo chiều dọc có ba loại giá trị riêng biệt: từ khóa, tỷ lệ phần trăm và độ dài. Mỗi giá trị đại diện cho một vị trí thẳng đứng trong một dòng hoặc liên quan đến phần tử gốc (vùng chứa) của phần tử được nhắm mục tiêu.
Các giá trị căn chỉnh theo chiều dọc chính là:
- đường cơ sở: định vị phần tử mục tiêu trong đường cơ sở của phần tử mẹ.
- top: đặt vị trí trên cùng của phần tử mục tiêu với phần đầu của phần tử cao nhất trong dòng hiện tại.
- giữa: căn giữa phần tử mục tiêu trong hàng hiện tại của nó.
- bottom: đặt vị trí dưới cùng của phần tử mục tiêu với phần dưới cùng của phần tử thấp nhất trong dòng hiện tại.
- sub: định vị phần tử mục tiêu với đường cơ sở chỉ số con của phần tử mẹ.
- super: định vị phần tử đích ở đường cơ sở chỉ số trên của phần tử mẹ.
- text-top: đặt phần tử đích ở đầu phông chữ của phần tử mẹ.
- text-bottom: đặt phần tử mục tiêu ở dưới cùng phông chữ của phần tử mẹ.
- tỷ lệ phần trăm (ví dụ: 20%): định vị đường cơ sở của phần tử đích tại một điểm trên, dưới hoặc trên đường cơ sở của phần tử mẹ. Giá trị này có thể âm hoặc dương.
- chiều dài (ví dụ: 10em): định vị đường cơ sở của phần tử đích tại một điểm trên, dưới hoặc trên đường cơ sở của phần tử mẹ. Giá trị này có thể âm hoặc dương.
Mẫu HTML cơ bản
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
}
</style>
<title>Document</title>
</head>
<body>
<div id="container">
<a href="http://google.com">Google Search</a>
<img src="https://source.unsplash.com/jFCViYFYcus/300x150" alt=" image of the forest">
<video width="320" controls>
<source src="videos/ocean_view.mov" type="video/mp4">
Video of the ocean.
</video>
<table>
<tr>
<th>Scenery</th>
<th>Discription</th>
</tr>
<tr>
<td>Forest</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>Ocean</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</table>
</div>
</body>
</html>
Đoạn mã HTML ở trên tạo một trang web đơn giản hiển thị bốn yếu tố: văn bản được liên kết, hình ảnh, video được nhúng và bảng. Nó sẽ giống như thế này trong trình duyệt của bạn:
Cách căn chỉnh văn bản theo chiều dọc
Theo mặc định, hầu hết các phần tử văn bản (chẳng hạn như tiêu đề, thẻ
và
Tuy nhiên, một số phần tử văn bản như thẻ và nằm trong dòng. Do đó, chúng hỗ trợ thuộc tính căn chỉnh theo chiều dọc. Để căn chỉnh theo chiều dọc văn bản, chỉ cần gán giá trị thích hợp cho thuộc tính căn chỉnh theo chiều dọc CSS.
Sử dụng Giá trị hàng đầu căn chỉnh theo chiều dọc trên Văn bản
a {
vertical-align: top;
}
Việc thêm mã CSS ở trên vào tài liệu HTML cơ bản sẽ căn chỉnh phần đầu của văn bản thẻ với phần đầu của phần tử cao nhất trong dòng. Sản xuất màn hình cập nhật sau:
Sử dụng Giá trị Phần trăm trên Văn bản
a {
vertical-align: -50%;
}CSS ở trên căn chỉnh phần tử văn bản ở vị trí thấp hơn 50% so với đường cơ sở của phần tử mẹ. Nó tạo ra kết quả sau trong trình duyệt của bạn:
Như bạn có thể thấy trong hình trên, phần tử văn bản chiếm một vị trí bên dưới phần tử hình ảnh và video, nằm trên cùng một dòng. Để định vị phần tử này ở hoặc cao hơn đường cơ sở, hãy sử dụng giá trị phần trăm dương.
Sử dụng giá trị độ dài trên văn bản
a {
vertical-align: 90px;
}
Đoạn mã trên căn chỉnh đường cơ sở của phần tử văn bản ở độ dài 90px trên đường cơ sở của phần tử mẹ. Điều này tạo ra kết quả sau trong trình duyệt:
Cách căn chỉnh theo chiều dọc hình ảnh
Thẻ là một phần tử nội tuyến, mà thuộc tính vertical-align của CSS hoạt động tốt.
Sử dụng siêu Giá trị căn chỉnh theo chiều dọc trên Hình ảnh
img {
vertical-align: super;
}
Đoạn mã trên đặt hình ảnh ở đường cơ sở chỉ số trên của phần tử mẹ. Điều này có nghĩa là ở vị trí phía trên đường cơ sở, như bạn có thể thấy trong kết quả sau:
Sử dụng Giá trị phần trăm căn chỉnh theo chiều dọc trên Hình ảnh
img {
vertical-align: 25%;
}
Đoạn mã trên căn chỉnh đường cơ sở của phần tử hình ảnh cao hơn 25% so với đường cơ sở của phần tử mẹ. Điều này tạo ra hiệu ứng phản chiếu sau của giá trị siêu cao:
Sử dụng Giá trị độ dài căn chỉnh theo chiều dọc trên Hình ảnh
img {
vertical-align: 5px;
}
Đoạn mã trên căn chỉnh đường cơ sở của phần tử hình ảnh ở vị trí cao hơn đường cơ sở của phần tử mẹ 5px. Điều này tạo ra hiệu ứng tương tự như hiệu ứng của các giá trị siêu và 25%:
Phương tiện được nhúng như video và iframe là các phần tử HTML nội tuyến. Do đó, thuộc tính vertical-align CSS hoạt động hiệu quả với chúng.
Sử dụng siêu Giá trị căn chỉnh theo chiều dọc trên Video
video {
vertical-align: sub;
}
Đoạn mã trên đặt video ở đường cơ sở chỉ số con của phần tử mẹ. Điều này có nghĩa là ở vị trí bên dưới đường cơ sở, như bạn có thể thấy trong kết quả sau:
Sử dụng Giá trị phần trăm căn chỉnh theo chiều dọc trên Video
video {
vertical-align: -25%;
}
Đoạn mã trên căn chỉnh đường cơ sở của phần tử video thấp hơn 25% so với đường cơ sở của phần tử mẹ. Điều này tạo ra hiệu ứng phản chiếu sau của giá trị phụ:
Sử dụng Giá trị độ dài căn chỉnh theo chiều dọc trên Video
video {
vertical-align: -5px;
}
Đoạn mã trên căn chỉnh đường cơ sở của phần tử hình ảnh ở vị trí thấp hơn đường cơ sở của phần tử mẹ 5px. Điều này tạo ra hiệu ứng giống như các giá trị phụ và -25%:
Cách căn chỉnh theo chiều dọc các mục trong bảng
Sử dụng thuộc tính vertical-align với một bảng hơi khó, vì bảng là một phần tử khối. Tuy nhiên, các thẻ
Sử dụng Giá trị hàng đầu căn chỉnh theo chiều dọc trên Dữ liệu bảng
td {
height: 40px;
vertical-align: top;
}
Đoạn mã trên thêm chiều cao 40px vào mỗi ô trong bảng. Sau đó, nó căn chỉnh dữ liệu trong mỗi ô lên đầu mỗi hàng. Điều này tạo ra kết quả sau trong trình duyệt:
Sử dụng Giá trị giữa căn chỉnh theo chiều dọc trên Dữ liệu bảng
td {
height: 40px;
vertical-align: middle;
}
Giá trị giữa căn chỉnh theo chiều dọc trong đoạn mã trên sẽ căn giữa dữ liệu theo chiều dọc trong mỗi ô. Nó tạo ra kết quả sau trong trình duyệt:
Sử dụng Giá trị dưới cùng căn chỉnh theo chiều dọc trên Dữ liệu Bảng
td {
height: 40px;
vertical-align: bottom;
}
Đoạn mã trên căn chỉnh dữ liệu trong mỗi ô ở cuối mỗi hàng. Nó tạo ra kết quả sau trong trình duyệt:
Bây giờ bạn có thể căn chỉnh các phần tử trên trang web của mình
Giờ đây, bạn có thể sử dụng thuộc tính căn chỉnh theo chiều dọc CSS với một loạt các phần tử nội tuyến khác nhau, bao gồm văn bản, phương tiện được nhúng và dữ liệu bảng. Quy tắc chung là thuộc tính vertical-align chỉ hoạt động trên các phần tử khối nội tuyến và khối nội tuyến.
Tuy nhiên, bạn có thể sử dụng thuộc tính này trên các phần tử khối, trước tiên bạn chỉ cần chuyển chúng thành các phần tử nội tuyến hoặc khối nội tuyến. Hãy nhớ rằng bạn có thể kết hợp căn chỉnh dọc với các thuộc tính căn chỉnh khác, chẳng hạn như căn chỉnh văn bản.
Đọc tiếp
Thông tin về các Tác giả
