Sử dụng width, max-width và margin: auto;
Đặt width của element block sẽ ngăn nó kéo dài ra các cạnh của container. Sau đó, bạn có thể đặt margin thành auto, để căn giữa theo chiều ngang element trong container chứa của nó. Element sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được phân tách bằng nhau giữa hai lề:
element <div> có width là 500px và margin được đặt auto
Lưu ý: Sự cố với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của element. Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.
Thay vào đó, sử dụng max-width, trong trường hợp này, sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt. Điều này quan trọng khi làm cho một trang web có thể sử dụng được trên các thiết bị nhỏ:
element <div> có max-width là 500px và margin được đặt auto
Mẹo: Thay đổi kích thước cửa sổ trình duyệt rộng dưới 500px, để xem sự khác biệt giữa hai div!
div.ex1 { width: 500px; margin: auto; border: 3px solid #73AD21; } div.ex2 { max-width: 500px; margin: auto; border: 3px solid #73AD21; }