无法居中在水平导航栏上的按钮

Question

我已经花费了荒谬的时间在谷歌上，仍然无法弄清楚如何将按钮放在我的导航栏中（我还是新来的CSS）。

这里是我的导航栏（不包括我的各种失败的尝试）。

CSS：

#navigation 
{ 
    list-style-type: none; 
    background: #222222; 
    overflow: hidden; 
    width: 1150px; 
    margin: 0; 
    padding: 0; 
    display:inline-block; 
    margin-left: 0 auto; 
    margin-right: 0 auto; 
} 

#navigation li 
{ 
    border-right: solid 1px #ca0002; 
    height: 35px; 
    display: inline-block; 
    margin: 0 auto; 
} 

#navigation li a:link, #navigation li a:visited 
{ 
    text-decoration: none; 
    display: block; 
    height: 35px; 
    color: #fff; 
    line-height: 35px; 
    padding: 0 20px 0 20px; 
    border-right: solid 1px #990000; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
} 

#navigation li a:hover 
{ 
    background: #990000; 
    color: #fff; 
} 

#navigation li.first 
{ 
    border-left: solid 1px #ca0002; 
} 

Answer 1

没有任何HTML我把创建HTML和使用您的ID的自由。

这里是工作提琴：

WORKING FIDDLE

在您的导航DIV我加

height: auto; 
    text-align:center; 

一些不必要的CSS被删除。

这将使导航选项卡在div中居中。

希望这会有所帮助！