Tìm hiểu hai cách khác nhau để căn giữa bố cục trang web của bạn với CSS.
Giả sử bạn đang tạo kiểu bố cục bài viết cho trang web của mình và bạn muốn căn giữa <article> phần tử nằm chính xác theo chiều ngang ở giữa trang của bạn.
Bạn có thể làm điều đó bằng một số cách. Cách tiếp cận cổ điển và đơn giản nhất để căn giữa các phần tử theo chiều ngang là sử dụng thuộc tính CSS margin và đặt các giá trị bên trái và bên phải của nó thành auto .
Bạn có thể theo dõi bằng cách sử dụng trình chỉnh sửa CodePen miễn phí.
Thực hiện đánh dấu HTML cơ bản sau cho bố cục bài viết:
<article>
<h1>Title for your article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
reprehenderit error.
</p>
</article>Và khối khai báo CSS sau:
article {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}Điều này sẽ căn giữa bố cục bài viết của bạn chính xác ở giữa trang web của bạn.
max-width thuộc tính bắt buộc phải căn giữa các phần tử theo chiều ngang vì nếu không, văn bản sẽ tự động kéo dài từ bên trái sang cạnh bên phải của trang của bạn.
Căn giữa theo chiều ngang với flexbox
Bạn cũng có thể căn giữa bằng cách sử dụng flexbox hiện đại bất động sản. Do cách flexbox chuyển thuộc tính cho các phần tử con, cách đơn giản nhất để căn giữa bố cục của bạn là bọc <article> của bạn trong một phần tử khác, rồi thêm flexbox thuộc tính cho phần tử mẹ mới đó.
Hãy kết hợp phần tử bài viết trước đó với <main> phần tử:
<main>
<article>
<h1>Title for your article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
reprehenderit error.
</p>
</article>
</main>
Và di chuyển các thuộc tính flexbox (không phải max-width ) từ article { } khối khai báo cho một main { } mới khối:
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
article {
max-width: 640px;
}
Điều đó sẽ hoạt động giống hệt với margin: auto tuyên bố bạn đã thấy trước đây.