導航菜單：css垂直居中

我試圖創建一個均勻間隔的導航菜單，無論菜單項是1行還是2行文本。我使用1行文本進行處理，但如果一個項目觸及多行，文本的垂直間距就會關閉。導航菜單：css垂直居中

我到目前爲止的代碼如下。任何幫助都是極好的。提前致謝。

風格：

 #pageNavigation { 
     background-image: url('../Images/TIBC_Base/nav-bg.png'); 
     background-repeat: repeat-y; 
     margin:5px 0; 
     padding:5px 15px 5px; 
     min-height:125px; 
} 
    #pageNavigation_bottom 
    { 
     clear:both; 
     background-image: url('../Images/TIBC_Base/nav-bg_bottom.png'); 
     background-repeat: no-repeat; 
     margin:-5px 0 0 -1px; 
     min-height:8px; 
    } 
    #pageNavigation .navContent{ width:240px; margin:0 -10px; } 
    #pageNavigation ul { list-style-type: none; margin:0; padding:0; } 
    #pageNavigation ul li { display: block; height:57px; border-top:0px #E1E1E1 solid; border-bottom:1px #E1E1E1 solid; text-align:center; overflow:hidden; } 
    #pageNavigation a { 
     color:#485963; 
     font-size:16px; 
     text-decoration:none; 
     text-shadow: 0px -1px #EEEEEE; 
     display:block; 
     height:57px;  
    } 
    #pageNavigation a:hover 
    { 
     background: #FAE2AD; 
     color: #485963; 
    } 
    #pageNavigation a.NavigationSelected 
    { 
     color:#F9F9F9; 
     background: #A5B5BE; 
     text-shadow: 1px 1px #485963; 
     font-weight: normal; 
    }

HTML

<div id="pageNavigation"> 
<ul class="navContent"> 
<li><a href="/Services">Services</a></li> 
<li><a href="/Services/Analysis">Analysis</a></li> 
<li><a href="/Services/Strategic-Planning">Strategic Planning</a></li> 
<li><a href="/Services/International-Market-and-Competitor-Research">International Market and Competitor Research</a></li> 
<li><a href="/Services/Budgeting-and-Forecasting">Budgeting and Forecasting</a></li> 
<li><a href="/Services/International-Cultural-Liaison" class="NavigationSelected">International Cultural Liaison</a></li> 
</ul> 
</div>

來源

2012-10-18 user891073

您應該創建一個[fiddle]（http://jsfiddle.net）重新創建此問題。 – Shmiddty

謝謝 - 我剛創建了小提琴演示。 – user891073

文本的垂直對齊方式是屬使用line-height LLY實現：http://jsfiddle.net/Shmiddty/wnfUC/1/

#pageNavigation a { 
    ... 
    height:57px; 
    line-height:57px;   
} 
#pageNavigation a.two-line{ 
    line-height:20px; 
    padding-top:10px;  
}

注意，我添加了類two-line到跨越兩行的錨元素。

來源

2012-10-18 17:08:19 Shmiddty

然後，您必須事先知道哪些項目佔用2行，哪些不佔用。例如，在一個多語言網站中，它會不同於語言到另一個... – FelipeAls

@FelipeAls正確，但在非多語言環境中需要向後兼容的情況下，這是另一種選擇。 – Shmiddty

您可以使用CSS表格佈局（！不是HTML表格元素，EH）來實現這一目標：http://jsfiddle.net/PhilippeVay/ZszJm/

ul顯示具有相同的算法爲表，以同樣的算法比細胞連結，且這裏li被顯示爲垂直的行。然後你就可以用vertical-align就像你想:)（你的情況middle值）發揮
您可以添加到table-layout: fixed和ul然後瀏覽器將使用其他算法用於顯示錶，一個不嘗試以適應單元格的寬度和高度對其內容，但將堅持CSS規則說。

兼容性：IE8及以上版本。它不會以IE7和6爲中心，這不是什麼大問題。

編輯：用這種方法，你不需要事先知道哪些項目比其他項目更長。瀏覽者會想到這一點。

來源

2012-10-18 17:15:45 FelipeAls

您可以使用此方法：http://css-tricks.com/vertically-center-multi-lined-text/

也有，你可以用一些其他的方法，但他們需要額外的HTML標記，此一個沒有。

來源

2012-10-18 17:16:51

導航菜單：css垂直居中

回答

相關問題