Vertical-align trong CSS

• January 10, 2010
• 17 comments

Tính năng Vertical-align trong CSS được kế thừa từ “thời đại” sử dụng bảng để thiết kế giao diện. Hiện tại tính năng valign trong table đã bị “đào thải” và không còn được sử dụng đúng chuẩn web nữa. Nhưng thay vào đó CSS lại giới thiệu một tính năng khác nghe tên hoàn toàn giống với valign là Vertical-align. Chính vì điều này nên đã gây ra một số hiểu lầm về nó. Trong bài này chúng ta sẽ xem xét cách sử dụng vertical-align trong CSS.

Trên thực tế rất ít khi bạn phải sử dụng tính năng vertical-align trong CSS trừ khi bạn đang thiết kế bảng với dữ liệu cần căn chỉnh vào giữa dòng. Nhưng theo kinh nghiệm cá nhân tôi, khi làm giao diện tôi rất ít khi sử dụng vertical-align bởi vì nó thực sự không cần thiết. Do chúng ta có thể sử dụng padding và margin để điều khiển nó tới vị trí mà mình muốn. Nhưng với những người mới học CSS và vừa thoát ra khỏi cách thiết kế bằng bảng thì cái “lối mòn” cũ vẫn chưa hoàn toàn bỏ được. Chính vì vậy nhiều người mới hỏi tại sao khi sử dụng vertical-align: middle trong thẻ div nó lại không cho kết quả như mong muốn.

Nói chung cách sử dụng vertical-align trong CSS để căn chỉnh một thành phần không phải là table cell cũng không hề đơn giản mà cũng lắm nhiêu khê. Có nhiều cách hoàn toàn không tương thích với các trình duyệt đặc biệt là IE (kể cả IE 8). Vậy nên khi quyết định sử dụng vertical-align để căn chỉnh thành phần trong block element như <div> bạn nên suy nghĩ cho kỹ. Tuy nhiên vì bạn vẫn muốn làm hoặc bắt buộc phải làm thì dưới đây là một số cách bạn có thể áp dụng được.

Cách 1: Biến <div> thành table cell

Trong cách này chúng ta sẽ biến một thẻ <div> thành một table cell và do đó có thể áp dụng vertical-align bình thường. Cái hay của cách này là ngắn gọn và lẹ nhưng nó không tương thích với trình duyệt IE (kể cả IE 8 beta). Cho nên bạn cũng cần suy nghĩ ở đây.

<div id="container">
   <div id="content">
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
</div>

#container {display: table;}
#content {display: table-cell; vertical-align: middle;}

Cách 2: Sử dụng margin và absolute position

Trong cách này chúng ta sẽ sử dụng absolute position để định vị thành phần và dùng margin giá trị âm để bù lại khoảng mình đẩy xuống. Cái hay trong cách này là tương thích với mọi trình duyệt, không cần thêm một thẻ div nữa. Nhưng mỗi khi trình duyệt bị thu nhỏ quá, nội dung sẽ biến mất.

<div id="container">
   <div id="content">
    <p> Lorem ipsum dolor sit amet.</p>
   </div>
</div>

#container {position: relative;}
#content {
position:absolute;
top:50%; height:200px;
margin-top:-100px; /* giá trị âm bằng một nửa chiều cao */
}

Cách 3: sử dụng line-height

Đây là cách có khi được sử dụng nhiều nhất bởi vì nó đơn giản nhất và tương thích với mọi trình duyệt. Nhưng nó chỉ có thể áp dụng với những thành phần chỉ có một dòng chữ và thành phần chứa nó có độ cao cụ thể.

<div id="content">
     Lorem ipsum dolor sit amet.
   </div>

#content {
 height:200px;
#content p {
line-height: 200px;
}

Kết luận

Ở bài này tôi giới thiệu với bạn 3 cách để căn chỉnh theo chiều dọc một thành phần. Cách nào cũng có điểm mạnh và điểm yếu và bạn hãy tùy từng trường hợp mà áp dụng sao cho hợp lý. Nhưng trên thực tế một đoạn văn không nhất thiết phải nằm giữa một thẻ div mới đẹp. Chính vì thế trừ trường hợp bắt buộc, tránh sử dụng vertical-align cho nó đỡ rắc rối.