如何居中“我的”导航栏？

所以我有一个在网上搜索的导航栏，我可以使用，并且在发现一个它，我加入到我正在做的网页如何居中“我的”导航栏？

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

如何居中“我的”导航栏？

回答

相关问题