垂直對齊導航欄中的文本

Question

我正在嘗試使用<span>來移動我的導航欄中的一些文本。我的導航欄是<ul>，所有元素都是<li> s，但是文本與導航欄的頂部對齊，我希望它以垂直居中。正如你可以在JSFiddle中看到的，我使用CSS中的a：hover屬性來改變文本懸停後的背景和顏色。當我將跨度應用於文本時，整個懸停部分也會移動。看看你能理解我的意思。

我的jsfiddle是在這裏：

http://jsfiddle.net/G8CJ7/

基本上，我只是想在一個簡單，簡潔的方式垂直對齊文本。最初我使用''標籤並在其上設置邊距，但我想避免使用標題標籤來達到改進SEO的目的。謝謝。

Answer 1

更新這幾年後，但總是有使用的選項：

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

與垂直對齊：中間;爲了中心的項目。現在我更喜歡這種方法，因爲您可以將響應式規則應用於顯示樣式（例如，如果您需要爲其他屏幕尺寸更新它，則將其更改爲顯示：塊並顯示：內嵌塊等）。這裏是一個小提琴：

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

Answer 2

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

新增的line-height：40像素垂直居中的文本。因爲IE7沒有完全支持，所以IE7會有問題，所以在li上使用padding-top的條件樣式表會解決它。

Answer 3

添加行高，你也可以添加填充到頂端：

.class { padding-top: 10px; } 

調整填充到中心。