Cách căn giữa trang Web sử dụng CSS

Hầu hết các màn hình LCD phổ biến trên thị trường ngày nay là màn ảnh rộng. Tỷ lệ màn hình rộng này có thể gây ảnh hưởng tới các nhà thiết kế web và cách họ trình bày trang Web. Tuy nhiên, với một đoạn mã Cascading Style Sheet (CSS) ngắn gọn, bạn có thể điều chỉnh thiết kế trang Web vào vị trí trung tâm trên bất kỳ màn hình nào cho dù màn hình đó theo tỷ lệ nằm ngang hay thẳng đứng.

Nếu bạn bước vào cửa hàng để chọn mua màn hình máy tính thì hãy chú ý rằng tỷ lệ màn hình đang có xu hướng chuyển sang quy mô tỷ lệ co giãn tương tự các rạp chiếu phim (hình chữ nhật) hơn là tỷ lệ 4: 3 của vô tuyến (hình vuông), tỷ lệ màn hình càng to thì độ rộng của nó càng lớn.

Màn hình này rất thích hợp để xem phim, chơi trò chơi hay chạy các chương trình bảng màu nặng như Photoshop, nhưng còn vấn đề truy cập mạng thì sao? Các dòng văn bản và chữ đoạn chữ dài gây khó chịu và mỏi mắt người dùng, đó là lý do mà tại sao rất nhiều trang web sử dụng hình thức căn giữa trang. Điều này cho phép thiết lập cố định chiều rộng cho nội dung trang và hiển thị nó theo kiểu cách động phù hợp với chiều rộng cửa sổ trình duyệt người dùng.

Tất nhiên là bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

Mở trình soạn thảo HTML và tạo một trang mới. Nhập đoạn mã bên dưới (Đoạn mã A) để bắt đầu.

Đoạn mã A

<html>

<head>

<title>Dàn một trang căn giữa với CSS</title>

</head>

<body>

</body>

</html>

Đặt một số đoạn text bên trong thẻ Body của tài liệu HTML (Đoạn mã B), sau đó bạn có thể thấy ngay ảnh hưởng của đoạn mã CSS mà bạn vừa xây dựng.

Đoạn mã B

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Lưu lại tài liệu HTML, sau đó xem thử tài liệu đó trên trình duyệt. Thay đổi độ rộng của cửa sổ trình duyệt để thấy rõ khi mở rộng hay co trang web lại thì nó có phù hợp với kích thước của vùng hiển thị.

Hãy bắt đầu bằng cách xây dựng thuần thục các đoạn mã CSS. Tạo ra các mã CSS đơn giản ở phần đầu của tài liệu (Đoạn mã C) thay vì liên kết tới một trang bên ngoài. Hãy đặt đoạn mã vào đúng vị trí ngay sau thẻ đóng </TITLE>.

Đoạn mã C

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">



</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Hầu hết các nhà thiết kế Web khi khai báo một lớp CSS sẽ được sử dụng như là phần tử căn giữa, đặt tên cho lớp là “wrapper” hoặc “container”. Trong ví dụ này bạn sẽ sử dụng tên lớp là “wrapper”, chúng ta có mã CSS như sau (Đoạn mã D):

Đoạn mã D

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">

<!-

#wrapper

-->

</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Tiếp theo, bạn sẽ thiết lập độ rộng của “wrapper” là 720 pixels (Đoạn mã E), tỷ lệ này thích hợp với màn hình 800 x 600. Đương nhiên là bạn hoàn toàn có thể điều chỉnh chiều rộng dài hay ngắn tùy ý cho phù hợp với thiết kế của bạn.

Đoạn mã E

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">

<!-

#wrapper {

width: 720px;

-->

</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Bạn vừa thiết lập độ rộng cho nội dung nhưng làm cách nào để căn giữa nó? Hãy dùng thuộc tính căn chỉnh lề như trong Đoạn mã F với giá trị căn chỉnh tự động bằng 0, đặt tất cả nội dung vào trung tâm màn hình:

Đoạn mã F

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">

<!-

#wrapper {

width: 720px;

margin: 0 auto;

}

-->

</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Chỉ một đoạn mã ngắn gọn mà tương thích với hầu hết các trình duyệt hiện đại. Tuy nhiên đối với các phiên bản cũ hơn của IE và Netscape thì có nhiều phát sinh khi áp dụng CSS ví dụ như nó sẽ căn giữa văn bản trong khi cái mà bạn thực sự muốn là văn bản sẽ được căn lề về bên trái nhưng được hiển thị ở giữa cửa sổ màn hình. Bạn không phải lo lắng nhiều về vấn đề này, có một cách rất đơn giản để sửa lỗi do các trình duyệt đã quá cũ như sau:

Hãy thêm thuộc tính “text-align” tại thẻ <BODY> của tài liệu HTML như minh họa bên dưới (Đoạn mã G). Bạn phải đặt đoạn mã này lên trước kiểu “wrapper” , hoặc nó sẽ không hoạt động phục thuộc vào sự sắp xếp tự nhiên của Cascading Style Sheets!

Đoạn mã G

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">



</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Sau đó thêm thuộc tính “text-align” ở phía dưới lớp “wrapper” và thiết lập giá trị “left” như trong Đoạn mã H.

Đoạn mã H

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">

<!-

body {

text-align: center;

}

#wrapper {

width: 720px;

margin: 0 auto;

text-align: left;

}

-->

</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Thêm một số dòng mã cần thiết được đưa vào trước khi bạn có thể kiểm tra công việc. “wrapper” sẽ bị phá vỡ trên Netscape 6 nếu như cửa sổ trình duyệt ngắn hơn độ dài của “wrapper”. Một thuộc tính (Đoạn mã I) trong thẻ body sẽ thực hiện điều này.

Đoạn mã I

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">

<!-

body {

text-align: center;

min-width: 760px;

}

#wrapper {

width: 720px;

margin: 0 auto;

text-align: left;

}

-->

</style>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</body>

</html>

Cuối cùng, áp dụng “wrapper” vào nội dung của tài liệu HTML bằng cách đặt thẻ <DIV> xung quanh tất cả đoạn văn bản như minh họa trong Đoạn mã J.

Đoạn mã J

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

<style type="text/css">



</style>

</head>

<body>

<div id="wrapper">

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS. Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.

</div>

</body>

</html>

Hãy kiểm tra trang web trên nhiều trình duyệt khác nhau để nhìn thấy kết quả như mong muốn, đó là văn bản được căn nằm về phía bên trái nhưng toàn bộ đoạn văn bản lại nằm chính giữa trình duyệt cho dù trình duyệt window lớn hay bé.

Mặc dù không dử dụng một bảng nào trong ví dụ này nhưng bạn vẫn có thể đặt bất kì nội dung mong muốn vào chính giữa thẻ <DIV> — các bảng bao gồm — và cấu trúc CSS sẽ giúp cho trang web được đặt vào chính xác vị trí trung tâm ở giữa.

Thứ Hai, 07/01/2008 13:28

1,4 ★ 7 👨 21.681