在导航栏中水平对齐图形中的项目

Question

我使用twitter bootstrap制作了一个RoR站点。我正在调整我的导航栏。它应该在中间有一个图像（标志），并在其左侧和右侧有列表项目。我在中心有徽标，我有两个列表项目，一个在徽标左侧，另一个在右侧。不幸的是，这两个列表项与中心的图形不一致。我猜这是我的选择器内的东西，我所有的列表项都遵循相同的规则。我想我必须为我的列表项目设置不同的规则，这些规则是文本/链接和我的徽标的不同规则。这里是我的CSS和HTML：

HTML：

<section id="nav_holder" class="nav_default"> 
    <nav role="navigation"> 
    <ul class="navigation"> 
     <li class="prelogo"><%= link_to "Home", root_path %></li> 
     <li id="logo" class="logo1"><%= link_to "About", about_path %></li> 
    </ul> 

CSS：

@import 'bootstrap'; 

.nav_default { 
    background-color: #ff3600; 
    width: 100%; 
    height: 110px; 
    position: fixed; 
    z-index: 1; 
    visibility: visible; 
} 

nav { 
    z-index: 2; 
    position: fixed; 
    width: 980px; 
    left: 45%; 
    margin-left: -490px; 
    padding-top: 10px; 
} 

.navigation { 
    text-align: center; 
    list-style: none; 
} 

.navigation li { 
    list-style: none; 
    height: 45px; 
    display: inline-block; 
    font-size: 1.4em; 
    font-family: "futura-pt",sans-serif; 
    font-weight: 700; 
} 

.prelogo { 
padding-right: 96px; 
} 

.logo1 { 
padding-left: 525px; 
background: url('ctclogonewnobg.png') no-repeat left 1px; 
} 

.logo { 

    margin-left: auto; 
    margin-right: auto; 
    width: 50em; 

} 

.masthead { 
    background: url('CDRedBG.png'); 
    background-repeat: no-repeat; 
    background-size:100% 100%; 
    height: 600px; 
} 
body { 
    padding-top: 40px; 
    background: url('escheresque_@2X.png'); 
} 

.container-center{ 
    width: auto; 
    text-align: center; 
} 

@import 'bootstrap-responsive'; 

我怎样才能让我的标志，同时具有我的其他列表项水平对齐居中？现在他们都在我的中心标志之上，甚至重叠在一起。

谢谢:)

Answer 1

首先，你有没有试着用两个 “浮动” 变量.logo和.logo1？

例如

float:left 

其次，尝试添加

position:relative 

到.logo和.logo1因为这可能会在与浮子变量一起帮助。

第三，根据.logo余量条目可以与

margin:0 auto; 

这将居中内容被缩短。