Cách Trình Bày Trang Web
CSS Giúp đỡ và gợi ý

Tài liệu nầy được phiên dịch từ W3C's Các trang Web mẫu Một vài thủ thuật và lời khuyên trong CSS. Tài liệu nầy có thể có những phiên dịch sai sót. Quí vị có thể tham khảo với bản chính tiếng Anh ở:
https://www.w3.org/Style/Examples/007/center.html

Bản phiên dịch tiếng Việt:

Người phiên dịch:
Manh Nguyen, www.dunedinflrealestate.com
www.realestate-palmharbor.com
Gatlinburg Condos For Sale

(This page uses CSS style sheets)

Dòng

Khối

Dọc

Demo

Căn giữa các đối tượng

Một nhiệm vụ thông thường của CSS là căn giữa văn bản hay hình ảnh. Thực tế, có ba loại căn giữa:

Căn giữa dòng văn bản

Loại căn giữa phổ biến nhất và (bởi vậy) cũng dễ dàng nhất là các dòng văn bản trong một đoạn hay một tiêu đề. CSS có thuộc tính 'text-align' cho điều này:

P { text-align: center }H2 { text-align: center }

làm cho mỗi dòng trong một P hay trong một H2 được căn vào giữa các lề của nó, như thế này:

Tất cả các dòng trong đoạn này đều được căn giữa các lề của đoạn, nhờ giá trị 'center' của thuộc tính 'text-align' trong CSS.

Căn giữa một khối hay hình ảnh

Đôi khi không phải chỉ văn bản cần được căn giữa mà là toàn bộ một khối. Hay, nói một cách khác: chúng ta muốn lề phải và lề trái đều nhau. Cách làm điều đó là để các lề về chế độ ‘auto’. Cách này thường được sử dụng với một khối có độ rộng cố định, bởi nếu bản thân một khối là linh hoạt, nó sẽ chỉ cần giành lấy tất cả chiều rộng sẵn có. Đây là một ví dụ:

P.blocktext {    margin-left: auto;    margin-right: auto;    width: 6em}...<P class="blocktext">This rather...

Khối văn bản tương đối hẹp này được căn giữa. Lưu ý rằng các dòng bên trong khối không được căn giữa (chúng được căn trái), không như ví dụ trước.

Đây cũng là cách căn giữa một hình ảnh: đưa nó thành một khối của chính mình và gán các thuộc tính lề cho nó. Ví dụ:

IMG.displayed {    display: block;    margin-left: auto;    margin-right: auto }...<IMG class="displayed" src="..." alt="...">

Những hình ảnh sau được căn giữa: some random image

Căn giữa theo chiều dọc

CSS cấp 2 không có thuộc tính căn giữa đối tượng theo chiều dọc. Có thể trong CSS cấp 3 sẽ có. Nhưng thậm chí trong CSS2 bạn vẫn có thể căn giữa các khối theo chiều dọc, bằng cách kết hợp một vài thuộc tính. Thủ thuật ở đây là chỉ định rằng khối bên ngoài được định dạng là một ô bảng, bởi các nội dung của một ô bảng có thể được căn giữa theo chiều dọc.

Ví dụ bên dưới căn giữa một đoạn bên trong một khối có chiều cao cho trước nhất định. Một ví dụ riêng biệt cho thấy một đoạn được căn giữa theo chiều dọc trong trình duyệt cửa sổ bởi nó nằm bên trong một khối được bố trí tuyệt đối và cao bằng cửa sổ.

DIV.container {    min-height: 10em;    display: table-cell;    vertical-align: middle }...<DIV class="container">  <P>This small paragraph...</DIV>

Đoạn nhỏ này được căn giữa theo chiều dọc.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
viết ngày 5/5/2001;
cập nhật ngày: 2009/03/03 12:46:41 $ GMT