水平導航欄中的中心文本

我希望我的文本位於導航欄中間。我試過垂直對齊：中心或中間，但沒有奏效。水平導航欄中的中心文本

以下是我有：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    height: 60px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-02-28 Bayern

你想要的文字水平或垂直居中對齊？或者你只是希望它在'父'的中間，你可以使用'line-height' –

爲了垂直集中的文字，你需要設置一個line-height等於元素的高度。在這種情況下，它是60px：

li a { 
    height: 60px; 
    line-height: 60px; 
}

希望這有助於！ :)

來源

2017-02-28 20:16:22

是的，這是做到了，謝謝！ :) – Bayern

設置line-height屬性爲你的元素的height：

li a { 
    height: 60px; 
    line-height: 60px; 
}

來源

2017-02-28 20:16:22 Drown

這樣做是的，謝謝！ – Bayern

如果它爲你做，請標記爲答案第一個答案 –

使用Flexbox（display: flex）居中文本。它比line-height（height可以是一個百分比）更靈活，並且具有良好的瀏覽器支持。見caniuse.com。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    height: 60px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-02-28 20:19:12

我會推薦這個答案，雖然'行高'相同，但仍然'flex'更好 –

我不同意，這是一個非常整潔的解決方案，但在舊版瀏覽器（尤其是IE9-）中的支持較少，正如@Justin Taddei自己所說的那樣 – Evochrome

@Evochrome根據[caniuse.com]（http://caniuse.com/#feat=flexbox），IE9的全球使用率爲0.27％）。值得注意的是，但並不是一個真正的大問題。 –

.nav{ 
 
    border:1px solid #ccc; 
 
    border-width:1px 0; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    background-color: #333; 
 
} 
 
.nav li{ 
 
    display:inline; 
 
} 
 
.nav a{ 
 
    display:inline-block; 
 
    padding:10px; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    height: 22px; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<ul class="nav"> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-02-28 20:58:13

https://jsfiddle.net/matt1966/kwrgyh2v/4/ –

嘿馬特，歡迎來到SO。你很想幫助人們修復他們的代碼。然而，當你這樣做時，非常感謝你解釋（可能很短）你到底做了什麼。保持良好的工作和愉快的編碼:) – Evochrome

代碼中的「魔術」是text-align：center;以及顯示：inline-block;根據請求將內容放在div的中心。還可以使用display：inline-block;有餘量：0 auto;以及。 –

水平導航欄中的中心文本

回答

相關問題