鏈接按鈕中的文本中心？

我在網頁上有一個水平導航欄，我需要將內容居中。同樣由於某種原因，它還是向後...而不是從左到右依次是主頁，商店，關於和聯繫人。它是聯繫，關於，商店，然後是家。鏈接按鈕中的文本中心？

我需要知道A：如何將它打開並且 B：如何將按鈕中的文本居中？

這裏是我的所有代碼：

<div id="masthead"></div> 
<h1>American Backcountry</h1> 
</div><!-- end masthead --> 
<ul id="mainnav"> 
    <li><a href="index.htm">Home</a></li> 
    <li><a href="shop.htm">Shop</a></li> 
    <li><a href="about.htm">About</a></li> 
    <li><a href="contact.htm">Contact</a></li> 
    </ul>

而CSS：

#mainnav{ 

    height:30px; 
    background-color: black; 
    margin: 0; 
    padding-right: 45px; 
    } 

#mainnav li{ 
    display:inline-block; 
    background-color: #6a4622; 
    float:right; 
    padding-right: 45px; 
    border:1px solid; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    margin-left: 3px; 
    width: 40px; 
} 

#mainnav a:link{ 
    display: block; 
    height: 28px; 
    color:#dfd098; 
    text-decoration: none; 
    font-weight:bold; 
    font-size: 12px; 
    text-transform: uppercase; 
    text-align: center; 

}

EDIT（答案被接受後）

好吧，我能中心的一切，得到它掛在右邊。

現在，我需要更改只有首頁鏈接的顏色，並更改文字顏色...我會如何做到這一點？我需要瞄準家庭鏈接。

來源

2015-10-18 Sylvia585

您的浮動：正確的導致相反的順序。 – Fundhor

謝謝，我解決了這個問題，但現在它移到了左邊......我如何將它保留在我的頁面右側，但是爲了保持順序？還需要將文字居中......？ – Sylvia585

嗨西爾維亞，堆棧溢出的問題和答案旨在爲現在和將來的所有站點用戶提供參考。通過刪除原來的問題並將其替換爲完全不同的問題，原來的答案再也沒有意義了。我希望你不介意，但我已經恢復了原來的問題。不過，我還在原始帖子的底部發布了第二個問題作爲更新。 –

我有一個網頁上的水平導航欄，我需要將內容居中。還因爲某種原因，它是向後的...而不是從左到右是主頁，商店，關於和聯繫人。它是聯繫，關於，商店，然後是家。

原因是代碼中的float: right屬性。有了這個屬性，你的元素將按照它們在代碼中出現的順序從右到左顯示，讓你感覺它們是向後的。

您是否碰巧知道如何讓我的Home鏈接的顏色和文字顏色與其他三種不同？

我建議您閱讀關於CSS Selectors和Pseudo-classes的更多信息。

#mainnav { 
 
    background-color: #dedede; 
 
    margin: 0; 
 
    padding-right: 45px; 
 
    text-align: right; 
 
} 
 
#mainnav li { 
 
    display: inline-block; 
 
    background-color: #6a4622; 
 
    border: 1px solid; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    margin-left: 3px; 
 
} 
 
#mainnav a { 
 
    display: block; 
 
    padding: 10px 15px; 
 
    color: #dfd098; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
} 
 
#mainnav li:first-child a { 
 
    color: #fff; 
 
}

<div id="masthead"></div> 
 
<h1>American Backcountry</h1> 
 
<!-- end masthead --> 
 
<ul id="mainnav"> 
 
    <li><a href="index.htm">Home</a> 
 
    </li> 
 
    <li><a href="shop.htm">Shop</a> 
 
    </li> 
 
    <li><a href="about.htm">About</a> 
 
    </li> 
 
    <li><a href="contact.htm">Contact</a> 
 
    </li> 
 
</ul>

來源

2015-10-18 16:40:06 Romulo

太棒了！但現在它位於導航欄的中心......我該如何將它放到頁面的右側？ – Sylvia585

我以爲你想要它在中心。在那裏你去，更新它顯示在右側的鏈接 – Romulo

美麗！非常感謝！！！有效！ – Sylvia585

你可能要考慮使用flexbox。

Flexbox的的好處是：

最少的代碼，所以它的效率
中心，垂直和水平，既簡單又容易
它的響應
它代表CSS的未來佈局

CSS

#mainnav { 
    display: flex; /* NEW - establish flex container */ 
    justify-content: flex-end; /* NEW - right-align flex items (li) */ 

    height: 30px; 
    background-color: black; 
    margin: 0; 
    padding-right: 45px; 
    list-style: none; 
    } 

#mainnav li { 
    /* display:inline-block; */ 
    background-color: #6a4622; 
    /* float:right; */ 
    /* padding-right: 45px; */ 
    border:1px solid; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    margin-left: 3px; 
    width: 75px; 
    display: flex; /* NEW - establish (nested) flex container */ 
    justify-content: center; /* center text horizontally, in this case */ 
    align-items: center; /* center text vertically, in this case */ 
} 

#mainnav a:link{ 
    /* display: block; */ 
    height: 100%; /* adjusted */ 
    color:#dfd098; 
    text-decoration: none; 
    font-weight:bold; 
    font-size: 12px; 
    text-transform: uppercase; 
    /* text-align: center; */ 
}

DEMO：http://jsfiddle.net/nhp0gsw6/1

注意Flexbox將被所有主流瀏覽器，支持except IE 8 & 9。

來源

2015-10-18 16:50:36

鏈接按鈕中的文本中心？

回答

相關問題