Canh giữa nội dung với CSS

Canh giữa nội dung trên trang HTML là vấn đề thường gặp. Dưới đây là một số tình huống và mã CSS canh giữa nội dung tương ứng có thể bạn sẽ cần đến.

1. Canh giữa văn bản theo chiều ngang trong bên trong một phần tử

Để canh giữa nội dung theo chiều ngang, bạn dùng thuộc tính text-align: center. Ví dụ, để canh giữa nội dung trong đoạn văn, dùng:

p {
   text-align: center;
}

2. Canh giữa phần tử bên trong một phần tử khác theo chiều ngang

Giả sử bạn có đoạn HTML sau:

<div class="outter">
   <div class="inner">
      Some content
   </div>
</div>

Giả sử phần tử .outter có chiều ngang lớn hơn nhiều so với .inner, và bạn muốn .inner phải nằm giữa bên trong .outter, bạn cần làm hai việc:

1. Định chiều ngang cho .inner
2. Canh lề trái và phải cho .inner là auto

Ví dụ:

.inner {
   width: 960px;
   margin: 0 auto;
}

Bạn cũng áp dụng cách này khi định giữa bố cục chính giao diện trang HTML bên trong cửa sổ trình duyệt.

3. Canh giữa văn bản theo chiều đứng bên trong một phần tử

Để canh giữa nội dung theo chiều đứng, bạn dùng thuộc tính vertical-align: middle. Ví dụ, để canh giữa nội dung trong một ô, dùng:

td {
   height: 50px;
   vertical-align: middle;
}

4. Canh giữa văn bản theo chiều đứng bằng line-height

Trong ví dụ ở mục 3, nếu bạn dùng vertical-align: middle với td thì mã trên sẽ làm việc. Nhưng nếu bạn dùng với div chẳng hạn thì lại không. Trong trường hợp dùng với div (hoặc bất kỳ phần tử nào khác hiển thị ở dạng block), bạn phải làm hai việc:

1. Định chiều cao của phần tử qua thuộc tính height
2. Định line-height của văn bản bằng giá trị height của phần tử

Ví dụ:

Giả sử có mã HTML sau:

<div id="container">content here</div>

Sử dụng mã CSS sau:

div#container {
   height: 40px;
   line-height: 40px;
}

5. Canh giữa văn bản theo chiều đứng trường hợp văn bản có nhiều dòng

Ví dụ ở mục 4 chỉ áp dụng được khi nội dung bên trong #container ngắn, gói gọn trên một dòng. Nếu nội dung dài, nằm trên nhiều dòng, mã CSS trên sẽ không cho ra kết quả mong muốn vì mỗi dòng văn bản sẽ bị ảnh hưởng bởi giá trị của line-height.

Trong tình huống này, ta có thể lợi dụng ví dụ ở mục 3, đó là nếu nội dung đang nằm trong một ô  (td), dù nó có nhiều dòng, ta chỉ cần sửa dụng vertical-align: middle để canh giữa nội dung theo chiều đứng.

Như vậy, ta làm hai việc:

1. Tạo thêm một phần tử bên ngoài và định kiểu hiển thị của nó là bảng (display: table)
2. Phần tử chứa nội dung, ta định kiểu hiển thị là ô (display: table-cell) rồi dùng vertical-align:middle

Ví dụ, giả sử có đoạn mã HTML sau:

<div class="outter">
   <div class="inner">
      Hello there<br />
      This is a new line.
   </div>
</div>

Hãy sử dụng đoạn CSS sau:

.outter {
   display:table;
}

.inner {
   display:table-cell;
   vertical-align:middle;
}

Tuy nhiên, cách này không làm việc được trên IE7 trở về trước. Nếu gặp IE7, có lẽ cách giải quyết duy nhất là dùng <table> thật.

6. Canh giữa phần tử theo chiều đứng

Tình huống nếu muốn canh phần tử theo chiều đứng, ta cần làm:

1. Cho vị trí hiển thị phần tử là tuyệt đối (absolute), vì ta sẽ định vị trí của nó bằng mã
2. Định thuộc tính top là 50%
3. Định lề trên (margin-top) là -(1/2)*chiều cao phần tử

Ví dụ:

HTML:

<div id="content">some text....</div>

CSS:

div#content {
   position: absolute;
   top: 50%;
   height: 300px;
   margin-top: -150px;
}