在導航欄中水平對齊圖形中的項目

我使用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('[email protected]'); 
} 

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

@import 'bootstrap-responsive';

我怎樣才能讓我的標誌，同時具有我的其他列表項水平對齊居中？現在他們都在我的中心標誌之上，甚至重疊在一起。

謝謝:)

來源

2013-06-27 HelloWorld

首先，你有沒有試着用兩個「浮動」變量.logo和.logo1？

例如

float:left

其次，嘗試添加

position:relative

到.logo和.logo1因爲這可能會在與浮子變量一起幫助。

第三，根據.logo餘量條目可以與

margin:0 auto;

這將居中內容被縮短。

來源

2013-06-27 03:22:04

謝謝，我會試試看看哪個效果最好。我實際上是通過使用「line-height」來實現它的。我不確定哪個選項是「最好的」，但我會和他們一起玩！ :) – HelloWorld

在導航欄中水平對齊圖形中的項目

回答

相關問題