在導航條中的li元素中居中超鏈接

Question

我想創建一個導航欄，其中的文本居中，但是我的CSS代碼將超鏈接放置在li的頂部角落，如圖中所示。

CSS：

#navigation { 
    clear: both; 
    margin: 0 auto 5px; 
    margin-top: 0; 
    height: 6%; 
    padding: 0 5px; 
    position: relative; 
    z-index: 1; 
} 

#navigation a { 
    height: 10%; 
    width: 50px; 
    color: red; 
    vertical-align: center; 
    text-align: center; 
    text-decoration: bold; 
} 

li { 
    border-top: solid; 
    border-right: solid; 
    border-left: solid; 
    border-bottom: none; 
    padding-left: 1px; 
    height: 51px; 
    width: 18%; 
    background-image: url('../images/tab-selected.png'); 
    background-repeat: repeat-x-y; 
    border-color: #F0F0F0; 
    display: inline-block; 
    padding-left: 1px; 
} 

HTML：

<nav id="navigation"> 
    <ul> 
    <li ><a href="overview.asp">overview</a></li> 
    <li ><a href="overview.asp">overview</a></li> 
</ul> 
</nav> 

Answer 1

有垂直中心一些不同的方式。

如果您知道鏈接的話，知道他們會不會有一個換行符，您可以添加line-height:51px;到錨（這是李的同一高度）。

這裏的小提琴：http://jsfiddle.net/vMLpL/

---

順便說一句，提示您：

• 對於邊框，可以使用border:1px solid #f0f0f0;然後只給無人底部，像border-bottom:none;而不是宣佈所有方面。

• 當您希望BG重複X和Y時，background-repeat僅爲repeat，而不是repeat-x-y。

• 對於vertical-align，沒有center。它是top，middle，bottom和baseline。但是它只適用於內聯元素，除了元素之外或其他內聯元素（它們的工作原理與td的valign="middle"屬性一樣）。

Answer 2

試試這個：

1. 從您的 「禮」 選擇以下內容：
   • height: 51px;
2. 以下內容添加到您的 「禮」 選擇：
   • text-align: center;
   • line-height: 51px;