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

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
• Căn giữa khối văn bản hay hình ảnh
• Căn giữa khối hay hình ảnh theo chiều dọc

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:

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...

Đâ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="...">

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>