Cách đặt Trang Web Làm Trung Tâm

Mục lục:

Cách đặt Trang Web Làm Trung Tâm
Cách đặt Trang Web Làm Trung Tâm

Video: Cách đặt Trang Web Làm Trung Tâm

Video: Cách đặt Trang Web Làm Trung Tâm
Video: Cách để tạo một trang web từ A tới Z - Chỉ với 4 bước đơn giản 2024, Tháng mười một
Anonim

Hầu hết các trang ngày nay được bố trí bằng cách sử dụng các lớp (div), vì vậy vấn đề căn chỉnh trang web vào giữa cửa sổ trình duyệt được giảm xuống nhiệm vụ căn giữa lớp xác định chiều rộng của vùng hiển thị của trang. Để nó được đặt ở giữa cửa sổ, cần phải đặt các cài đặt thích hợp cho phần tử mẹ của nó hoặc cho chính khối này.

Cách đặt trang web làm trung tâm
Cách đặt trang web làm trung tâm

Nó là cần thiết

Kiến thức cơ bản về ngôn ngữ HTML và CSS

Hướng dẫn

Bước 1

Đặt lớp mà bạn muốn định vị ở giữa cửa sổ, giữa phần mở và đóng của thẻ trung tâm, nếu bạn muốn thực hiện chỉ bằng cách sử dụng ngôn ngữ HTML (Ngôn ngữ đánh dấu siêu văn bản - "ngôn ngữ đánh dấu siêu văn bản"). Chúng tôi sẽ giả định rằng lớp cha của lớp xác định các đường viền trang là phần nội dung của trang này. Phiên bản đơn giản nhất của mã HTML sử dụng thẻ trung tâm trong trường hợp này có thể trông giống như sau:

Trang trung tâm

văn bản trang

Bước 2

Nếu bạn muốn sử dụng CSS (Cascading Style Sheets) để căn giữa trang, hãy sử dụng tính năng tự động định kích thước phần đệm từ các đường viền của cửa sổ trình duyệt. Kích thước lề trong CSS được xác định bởi thông số lề. Xóa các thẻ trung tâm khỏi mẫu trước đó và thêm thông số lề là 0 auto vào thuộc tính style của lớp xác định chiều rộng trang:

Trang trung tâm

văn bản trang

Bước 3

Tất nhiên, định nghĩa kiểu có thể được lấy ra khỏi thuộc tính style và được đặt trong tệp bên ngoài hoặc trong phần đầu của tài liệu (giữa các thẻ và). Trong trường hợp này, cùng một mã sẽ như thế này:

Trang trung tâm

#pageFrame {

chiều rộng: 700px;

chiều cao: 400px;

nền: # 0BB;

margin: 0 auto;

}

văn bản trang

Đề xuất: