Trung tâm hóa một phần tử khối
Các phần tử khối có thể được trung tâm hóa theo chiều ngang bên trong phần tử cha của chúng bằng
cách thiết lập cả left và right margins thành auto. Vì vậy, bạn có thể trung tâm hóa page body bên
trong cửa sổ trình duyệt sử dụng quy tắc style:
body{
margin-left:auto;
margin-right:auto;
}
Trung tâm hóa theo chiều dọc
Trung tâm hóa một phần tử theo chiều dọc bên trong phần tử cha của nó không dễ hoàn thành vì chiều cao
của phần tử cha thường được quyết định bởi nội dung của nó, cái có thể không là một giá trị xác định.
Một giải pháp là hiển thị phần tử cha như một table cell (ô bảng) với một height xác định và sau
đó thiết lập đặc tính vertical-align thành middle. Ví dụ, để trung tâm hóa theo chiều dọc đề mục h1 sau
bên trong phần tử div:
<div>
<h1>Pandaisia Chocolates</h1>
</div>
bạn sẽ áp dụng quy tắc style:
div{
height:40px;
display:table-cell;
vertical-align:middle;
}
Sử dụng quy tắc style này h1 heading sẽ được trung tâm hóa theo chiều dọc.
Để trung tâm hóa theo chiều dọc một dòng text đơn bên trong phần tử cha của nó, thiết lập line height
của text lớn hơn kích cỡ font của text. Quy tắc style sau sẽ có kết quả một h1 heading với heading text
trung tâm hóa theo chiều dọc:
h1{
font-size:1.4em;
line-height:2em;
}
Chú ý rằng cách tiếp cận này chỉ làm việc cho một dòng text đơn. Nếu text đi tới dòng thứ hai, nó sẽ không
còn trung tâm hóa theo chiều dọc. Trung tâm hóa theo chiều dọc là một thách thức thiết kế phổ biến và có một
vài đường vòng khác đã được tìm ra qua các năm. Bạn có thể tìm kiếm trên web cho các giải pháp khác cho
vertical centering.