Cách căn giữa một trang web mà không cần cuộn

Thiết kế trang web cho các doanh nghiệp và các tổ chức khác thường kết hợp các yếu tố tiếp thị và thương hiệu được xác định rõ. Nếu trang web của bạn có một trang Web mà bạn muốn đặt ở giữa, bạn có thể tự làm điều đó bằng cách sử dụng kết hợp mã HTML và CSS (Cascading Style Sheet). Nhiều nhà phát triển sử dụng các thuộc tính cuộn cho các thành phần trang Web để ra lệnh cho các thuộc tính định tâm, nhưng điều này không phải lúc nào cũng đáng tin cậy. Để xác định bố cục trang web tập trung và một trang sẽ xuất hiện mà không có thanh cuộn, cần phải có một vài khai báo CSS.

Tạo trang HTML của bạn. Nếu bạn có một trang bạn đang làm việc, hãy mở nó. Nếu không, hãy tạo một tệp mới trong trình soạn thảo văn bản và lưu nó với phần mở rộng ".html". Sử dụng các phác thảo sau:

Lưu ý rằng trang có phần dành cho mã CSS trong phần đầu và phần tử trong phần thân. Nội dung của trang nên được đặt bên trong yếu tố này. Nếu bạn đang làm việc với một trang hiện có, hãy tìm mã CSS cho nó, có thể được lưu trữ trong một tệp CSS riêng được liên kết từ đầu trang của bạn.

Xác định vùng chứa trang trong CSS. Để định kiểu phần tử chứa, trước tiên bạn cần xác định nó trong mã CSS. Trong phần kiểu trong đầu trang của bạn hoặc một tệp riêng nếu đó là những gì bạn đang làm việc, hãy thêm bộ chọn và phác thảo sau:

thùng đựng hàng {

}

Cái này xác định phần tử với "container" là thuộc tính ID của nó. Các khai báo kiểu cho phần tử sẽ xuất hiện giữa dấu ngoặc mở và đóng. Ngoài ra, bạn có thể xác định thành phần bằng cách sử dụng giá trị thuộc tính lớp như sau:

.thùng đựng hàng {

}

Điều này sẽ xác định các yếu tố sau:

Áp dụng chiều rộng cố định cho phần tử để căn giữa nội dung của nó. Để căn giữa các phần tử trong trang của bạn, phần tử chứa phải có chiều rộng cố định. Thêm một giữa các dấu ngoặc CSS cho phần tử "container" như sau:

chiều rộng: 800px;

Thay đổi giá trị chiều cao cho phù hợp với thiết kế của bạn. Bây giờ bạn có thể áp dụng thuộc tính lề, điều này sẽ buộc phần tử nằm ở giữa trong trang:

lề: tự động;

Ngăn chặn các yếu tố cuộn. Nếu bạn không muốn trang cuộn, bạn cần áp dụng thuộc tính chiều cao cho thành phần chứa như sau:

chiều cao: 90%;

Thay đổi giá trị cho phù hợp với thiết kế của bạn. Nếu các phần tử bên trong container chiếm nhiều không gian hơn phần này và bạn muốn ngăn cuộn, bạn cần ẩn phần tử tràn như sau:

tràn: ẩn;

Điều này sẽ ngăn thanh cuộn xuất hiện ngay cả khi nội dung trang của bạn chiếm nhiều hơn chiều cao được phân bổ trong trình duyệt của người dùng.

Lưu và xem trang của bạn. Mở nó trong một trình duyệt hoặc tải nó lên trang web của bạn để xem kết quả. Bạn có thể cần phải điều chỉnh để đi đến thiết kế bạn muốn. Hãy chắc chắn rằng bạn đã kiểm tra trang sau khi bạn có nội dung hoàn chỉnh trong đó, vì diện mạo của nó có thể thay đổi đáng kể.

tiền boa

Các trình duyệt Web khác nhau triển khai các quy tắc CSS theo nhiều cách khác nhau, vì vậy hãy đảm bảo bạn kiểm tra các trang của mình theo nhiều cách.