Căn chỉnh văn bản theo chiều dọc Trong Navbar

Question

Tôi đang cố gắng sử dụng <span> để di chuyển một số văn bản trong thanh điều hướng của mình. Thanh điều hướng của tôi là <ul> và các thành phần là tất cả <li> s nhưng văn bản được căn chỉnh ở đầu thanh điều hướng và tôi muốn nó được căn giữa theo chiều dọc. Như bạn có thể thấy trong JSFiddle, tôi đang sử dụng thuộc tính a: hover trong CSS để thay đổi màu nền và màu của văn bản khi nó được di chuột qua. Khi tôi áp dụng các span để chỉ văn bản, toàn bộ phần lơ lửng được di chuyển quá. Xem bạn có hiểu ý tôi không.

My JSFiddle là ở đây:

http://jsfiddle.net/G8CJ7/

Về cơ bản tôi chỉ muốn các văn bản theo chiều dọc thẳng hàng theo một cách ngắn gọn đơn giản. Ban đầu tôi đã sử dụng thẻ '' và thiết lập một lề trên chúng nhưng tôi muốn tránh sử dụng thẻ tiêu đề cho mục đích này để cải thiện SEO. Cảm ơn.

Answer 1

Đang cập nhật này một vài năm sau đó nhưng luôn có tùy chọn sử dụng:

display:table; 
display:table-row; 
display:table-cell; 

với vertical-align: middle; để căn giữa các mục. Tôi thích cách tiếp cận này những ngày này bởi vì bạn có thể áp dụng các quy tắc đáp ứng cho kiểu hiển thị (ví dụ, thay đổi nó thành display: block và display: inline-block, vv nếu bạn cần cập nhật nó cho các kích thước màn hình khác.

http://jsfiddle.net/G8CJ7/68/

Answer 2

http://jsfiddle.net/G8CJ7/1/

Đã thêm chiều cao dòng: 40px để căn giữa văn bản theo chiều dọc. IE7 sẽ có vấn đề với điều này vì nó không được hỗ trợ đầy đủ, do đó, một bảng định kiểu có điều kiện với một padding-top trên li sẽ giải quyết nó.

Answer 3

Thêm chiều cao dòng hoạt động, bạn cũng có thể thêm đệm lên trên cùng:

.class { padding-top: 10px; } 

Điều chỉnh padding đến trung tâm.