{CSSYeah:com;} Tạp chí tiếng Việt dành cho Web designer

Từ trước tới giờ khi bạn muốn đặt một dòng chữ (giả sử như) tiêu đề vào giữa một thẻ HTML có một chiều cao xác định thì bạn làm thế nào? Theo truyền thống dùng <table> thì chúng ta chỉ việc đặt thuộc tính valign="middle" vào trong một thẻ <td> là xong. Nhưng nếu đó không phải là thẻ <td> thì bạn sẽ làm thế nào?

Đề trả lời thắc mắc đó sau đây tôi xin mách nước bạn một thủ thuật nhỏ trong CSS.

Giả sử rằng bạn dùng một thẻ HTML dạng khối (Block Element) có chiều cao xác định height: 100px;. Bây giờ bạn muốn đặt một dòng tiêu đề có nội dung Tin mới nhất vào giữa (theo chiều cao) của thẻ HTML đó.

Bạn có thể dùng thuộc tính padding để đẩy dòng chữ đó vào giữa, nhưng đó không phải là giải pháp đúng đắn nhất. Trong trường hợp này thuộc tính line-heigh sẽ là một giả pháp tốt nhất, Chúng ta sẽ dùng thuộc tính line-height cho thẻ HTML đó.

Ví dụ

div.textcenter {
  margin: 0;
  padding: 0;
  height: 100px;
  line-height: 100px;
  border: 1px solid #CCCCCC;
}