Đây là ba cách khác nhau để căn giữa văn bản theo chiều dọc trong CSS. Căn giữa theo chiều dọc nghĩa là căn chỉnh văn bản vào giữa vùng chứa.
. Sử dụng thuộc tính display
Chúng ta có thể sử dụng display: flex để biến vùng chứa thành flexbox. Sau đó áp dụng align-items: center để căn giữa văn bản theo chiều dọc.
HTML<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
align-items: center; /* Vertically centers content */
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Kết quả
. Sử dụng thuộc tính line-height và vertical-align
Các thuộc tính line-height và vertical-align căn giữa văn bản bằng cách đặt line-height bằng chiều cao vùng chứa. Kỹ thuật này căn chỉnh văn bản theo chiều dọc bên trong vùng chứa.
HTML<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
vertical-align: middle;
border: 2px solid black;
height: 200px;
line-height: 200px;
width: 90%;
}
</style>
</head>
<body>
<div>
Centered Text
</div>
</body>
</html>
Kết quả
. Sử dụng CSS Grid
Để căn chỉnh văn bản theo chiều dọc bằng CSS Grid, hãy đặt display: grid. align-items: center đảm bảo căn giữa hoàn hảo bất kể kích thước màn hình.
HTML<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
align-items: center;
/* Vertically centers content */
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Kết quả