Cách thực hiện - Căn giữa danh sách
Tìm hiểu cách căn giữa danh sách bằng CSS.
Danh sách căn giữa
- Cà phê
- Trà
- Cô-ca Cô-la
Căn giữa danh sách HTML
Bước 1) HTML:
Gói phần tử <ul>
bên trong phần tử vùng chứa, như <div>
:
Ví dụ
<div class="container">
<ul class="myUL">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
Bước 2) Thêm CSS:
Căn giữa phần tử <div>
và thay đổi cách hiển thị <ul>
thành inline-block
.
Tùy chọn, bạn có thể căn trái các mục trong danh sách để có cái nhìn gọn gàng hơn:
Ví dụ
div.container {
text-align: center;
}
ul.myUL {
display: inline-block;
text-align: left;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn căn chỉnh CSS của chúng tôi để tìm hiểu thêm về cách căn chỉnh các phần tử.