居中导航栏 [英] Center a Navigation Bar

问题描述

使用下面的CSS，我试图在页面顶部制作一个导航栏（固定在顶部），而不是它位于屏幕的绝对左侧，我希望它居中。

  ul＃list-nav 
 {
 position：fixed; 
 top：0; 
剩下：0; 
 margin：auto; 
 padding：0px; 
宽度：100％; 
 height：28px; 
 font-size：120％; 
 display：inline; 
 text-decoration：none; 
 list-style：none; 
背景颜色：＃1F1F1F; 
 border：none; 
 z-index：1000; 
} 
 
 ul＃list-nav li 
 {
 float：left; 
} 
 ul＃list-nav a 
 {
 background-color：＃1F1F1F; 
颜色：＃C4C4C4; 
 / * display：block; * / 
 padding：5px 15px; 
 text-align：center; 
 text-decoration：none; 
 font-size：14px; 
} 
 
 ul＃list-nav a：hover 
 {
 background-color：＃4D4D4D; 
 text-decoration：none; 
} 
 
 ul＃list-nav a：active 
 {
 background-color：＃9C9C9C; 
 text-decoration：none; 
} 
  

到目前为止尝试将其设置为垂直列表，或者使按钮在中心（而不是居中）。如何才能做到这一点？

编辑：下面是HTML ...这个列表是唯一被风格化的。

 < ul id =list-nav> 
< li>< a href =/ ourbs / index.php>主页< / a>< / li> 
< li>< a href =/ ourbs / categories / projects.php>项目< / a>< / li> 
< li>< a href =/ ourbs / categories / opinion.php>意见< / a>< / li> 
< li>< a href =/ ourbs / categories / humour.php>幽默< / a>< / li> 
< li>< a href =/ ourbs / categories / games.php>游戏< / a>< / li> 
< li>< a href =/ ourbs / categories / movies.php>电影< / a>< / li> 
< li>< a href =/ ourbs / categories / tvshows.php>电视节目< / a>< / li> 
< / ul> 
  

编辑2：这是一个jsFiddle，如果这有助于
http://jsfiddle.net/752jU/1/

解决方案

您只需要一个包装 div 即可完成此操作......

http://jsfiddle.net/752jU/5/

注意：通过使用 display：inline 我的答案也是擅长IE 6& 7 ，如果有问题的话。

  div＃wrapper {
 position：fixed; 
 top：0; 
宽度：100％; 
 text-align：center; 
 height：28px; 
背景颜色：＃1F1F1F; 
 border：none; 
 z-index：1000; 
} 
 ul＃list-nav {
 padding：0px; 
 width：auto; 
 font-size：120％; 
 text-decoration：none; 
 list-style：none; 
} 
 ul＃list-nav li {
 display：inline; 
 
  

HTML：

 < div id =wrapper> 
< ul id =list-nav> 
< li>< a href =/ index.php>主页< / a>< / li> 
< li>< a href =/ ourbs / categories / projects.php>项目< / a>< / li> 
< li>< a href =/ categories / opinion.php>意见< / a>< / li> 
< li>< a href =/ categories / humour.php>幽默< / a>< / li> 
< li>< a href =/ categories / games.php>游戏< / a>< / li> 
< li>< a href =/ categories / movies.php>电影< / a>< / li> 
< li>< a href =/ categories / tvshows.php>电视节目< / a>< / li> 
< / ul> 
< / div> 
  

Using the following CSS, I'm trying to make a navigation bar at the top of the page (fixed to the top) but instead of it being on the absolute left of the screen, I want it centered.

ul#list-nav
{
    position:fixed;
    top:0;
    left:0;
    margin:auto;
    padding:0px;
    width:100%;
    height:28px;
    font-size:120%;
    display:inline;
    text-decoration:none;
    list-style:none;
    background-color: #1F1F1F;
    border:none;
    z-index:1000;
}

ul#list-nav li
{
    float:left;
}
ul#list-nav a
{
    background-color:#1F1F1F;
    color:#C4C4C4;
    /*display:block;*/
    padding:5px 15px;
    text-align: center;
    text-decoration:none;
    font-size:14px;
}

ul#list-nav a:hover
{
    background-color:#4D4D4D;
    text-decoration:none;
}

ul#list-nav a:active
{
    background-color:#9C9C9C;
    text-decoration:none;
}

Attempts so far make it a vertical list, or make the buttons start in the center (rather than be centered). How can I accomplish this?

EDIT: below is the HTML ... this list is the only thing being styled.

<ul id="list-nav">
            <li><a href="/ourbs/index.php">Home</a></li>
            <li><a href="/ourbs/categories/projects.php">Projects</a></li>
            <li><a href="/ourbs/categories/opinion.php">Opinion</a></li>
            <li><a href="/ourbs/categories/humour.php">Humour</a></li>      
            <li><a href="/ourbs/categories/games.php">Games</a></li>
            <li><a href="/ourbs/categories/movies.php">Movies</a></li>
            <li><a href="/ourbs/categories/tvshows.php">TV Shows</a></li>
</ul>

EDIT2: here's a jsFiddle if this helps http://jsfiddle.net/752jU/1/

解决方案

You only need one wrapper div to accomplish this...

http://jsfiddle.net/752jU/5/

Note: By using display: inline my answer is also good in IE 6 & 7, if that matters.

CSS:

div#wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    height:28px;
    background-color: #1F1F1F;
    border: none;
    z-index: 1000;
}
ul#list-nav {
    padding: 0px;
    width: auto;
    font-size: 120%;
    text-decoration: none;
    list-style: none;
}
ul#list-nav li {
    display: inline;
}

HTML:

<div id="wrapper">
    <ul id="list-nav">
        <li><a href="/index.php">Home</a></li>
        <li><a href="/ourbs/categories/projects.php">Projects</a></li>
        <li><a href="/categories/opinion.php">Opinion</a></li>
        <li><a href="/categories/humour.php">Humour</a></li>        
        <li><a href="/categories/games.php">Games</a></li>
        <li><a href="/categories/movies.php">Movies</a></li>
        <li><a href="/categories/tvshows.php">TV Shows</a></li>
    </ul>
</div>

这篇关于居中导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！