Căn Chỉnh Trang Web Của Bạn Với Trung Tâm

2024 Tác giả: Lauren Nevill | [email protected]. Sửa đổi lần cuối: 2023-12-16 18:57

Khi viết mã, người quản trị trang web phải nỗ lực rất nhiều để trang web trông đẹp như nhau ở các độ phân giải màn hình khác nhau. Giải pháp tốt nhất là căn giữa tất cả nội dung trên trang.

Hướng dẫn

Bước 1

Phương pháp căn giữa phụ thuộc vào phương pháp bố trí. Bạn có thể sử dụng thẻ hoặc

… Tất nhiên, việc gói tất cả nội dung trong một thẻ sẽ dễ dàng hơn, nhưng nó đã lỗi thời từ lâu và không có gì đảm bảo rằng mọi thứ sẽ hoạt động chính xác. Cách hiện đại nhất là sử dụng công nghệ CSS.

Bước 2

Thẻ tách một phần của mã thành một khối, cho phép bạn thay đổi hình thức của nội dung, tạo cho phân đoạn một phông chữ, màu sắc, nền, v.v. Với bố cục khối, tất cả nội dung của thẻ đều được đặt trong thẻ. Trong chúng tôi đặt căn chỉnh với thuộc tính align. Nó sẽ trông giống thế này:

Nội dung trang web

Bước 3

Căn giữa cũng có thể được thiết lập bằng các công cụ CSS. Để thực hiện việc này, bạn cần tạo một tệp bảng định kiểu riêng biệt hoặc đặt mọi thứ trong cùng một tệp HTML, trong thẻ. Mã sẽ trông như thế này:

* {lề: 0; đệm: 0;}

thân hình {

text-align: center;

}

div {

chiều rộng: 700px;

margin: 0 auto;

}

Bước 4

Trong bố cục bảng, căn giữa được đặt bằng cách sử dụng các bảng trong thẻ

… Mã sẽ như thế này: <bảng trang web

… Bảng tương ứng sẽ được đặt ở giữa trang và nội dung của nó cũng vậy. Bạn cũng có thể đặt chiều rộng của bất kỳ khối nào bằng cách chỉ định nó bằng cách sử dụng tham số width.

Bước 5

Khi chọn chiều rộng trang, hãy nhớ rằng độ phân giải màn hình của người dùng có thể rất khác với độ phân giải của bạn. Đôi khi, để không bị nhầm với kích thước, bạn nên đặt mọi thứ dưới dạng phần trăm. Điều này đặc biệt hữu ích nếu bạn có một trang web đơn giản.

Bước 6

Cho dù bạn sử dụng phương pháp nào, hãy đảm bảo rằng trang web của bạn hoạt động chính xác trên tất cả các trình duyệt. Nếu vì lý do nào đó, nó được hiển thị không chính xác ở một trong số chúng - hãy chỉ ra điều này.