{}

Tạp chí tiếng Việt dành cho Web Designers.
Thứ Năm ngày 4 Tháng 12 năm 2008
Đặt dòng text vào giữa ( theo chiều cao)

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;
}
TIN MỚI NHẤT
 

Vài nét về tác giả

Chu Huu Trung Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com

Free icons

Free icons Với những bộ icon này bạn sẽ làm cho các dự án của bạn thêm sinh động hơn.