如何居中「我的」導航欄？

所以我有一個在網上搜索的導航欄，我可以使用，並且在發現一個它，我加入到我正在做的網頁如何居中「我的」導航欄？

CSS：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

a:link, a:visited { 
    display: block; 
    width: 120px; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #98bf21; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a:hover, a:active { 
    background-color: #7A991A; 
}

HTML：

<ul> 
    <li><a 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>

w3schools link

無論如何，我怎麼會去這個中心頁面的中間？

當我檢查的其他問題也說，問題是一些與浮動做到：左，但是當我試圖與recommened替代顯示器來替代它：inline-block的;將垂直對齊的箱子

任何幫助表示讚賞^^

來源

2015-08-26 gitclown

的[水平居中一個div在一個div]可能重複（http://stackoverflow.com/questions/114543/horizontal-center-a-div-in-a-div） – Ormoz

但我們不知道它是否爲dup，因爲我們還沒有看到任何來自@gitclown的代碼。 –

試試這個CSS：

ul { 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    text-align: center; 
} 

li { 
    display: inline-block; 
}

正如你所看到的，它把各個元素之間的空間不大，這是因爲由於display: inline-block，在HTML中的<li>行之間的返回正在作爲空白空間準備好。您可以使用下面的方法刪除那些空間：

<ul> 
    <li><a 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>

JSFIDDLE DEMO

來源

2015-08-26 02:42:04 JRulle

謝謝你！完美工作！ :) – gitclown

應在3分鐘內完成 – gitclown

如何居中「我的」導航欄？

回答

相關問題