垂直居中導航欄

Question

我有一個包含兩個元素的標題。第一個是公司標誌的圖像，寬度設置爲25％。另一個是導航欄，其元素設置爲內聯，因此它是水平的。我希望導航欄能夠垂直設置，但對於我的生活無法弄清楚。我已經將所有我知道的東西都設置爲可以使用垂直對齊的元素，並將所有內容放在顯示的內嵌或表格單元格中以應用它。什麼都沒有

請記住，我不只是給它一個靜態百分比填充或邊距頂部是因爲隨着頁面變寬，圖像高度會隨着寬度的增加而擴大，因爲當您水平地展開瀏覽器時，導航變得更加和更不合適的地方。

我非常感謝任何幫助，因爲我試過（比我想承認的時間長得多），只是垂直居中對象。

HTML砍倒：

<div id="container"> 
<header id="header" role="banner"> 
    <img src="images" /> 
    <nav id="nav" role="navigation"> 
    <ul> 
     <li><a href="#" title="About Us">About Us</a></li><li><a href="#" title="Biographies">Biographies</a></li><li><a href="#" title="Services">Services</a></li><li><a href="#" title="Careers">Careers</a></li><li><a href="#" title="Contact">Contact</a></li> 
    </ul> 
    </nav> 
</header> 

CSS砍倒：

header img { 
    height: auto; 
    width: 25%; 
    float: left; 
    } 

header nav { 
    width: 75%; 
    font-size: 1em; 
    } 

header nav li { 
    display: inline-block; 

    width: 19%; 
    } 

header nav li a { 
    background: #2CB2E6; 
    line-height: 

繼承人一個簡單的jsfiddle： http://jsfiddle.net/LbTCT/

Answer 1

你原來的小提琴Here's a fork。你必須設置inline-block你的標誌和nav元素本身：

header img, header nav { 
    display: inline-block; 
    vertical-align: middle; 
} 

而不是試圖float事情。

Answer 2

關於將所有內容放入內聯塊的答案是正確的。在這種情況下，float不會爲你做任何事情，除非將元素從文檔流中分離出來。但是，如果你的目標老的瀏覽器，下面是應該爲那些不支持工作，解決垂直對齊表格單元格之外：

Example Fiddle

及相關CSS改變在這裏：

header { 
    position:relative; 
    display:block; 
} 
header:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content:" "; 
    clear: both; 
    height: 0; 
} 
header nav { 
    width: 70%; 
    font-size: 1em; 
    position: absolute; 
    top: 50%; 
    line-height: 200%; 
    margin-top: -2em; 
} 

Answer 3

這是一種做法，它涉及到標記的小改動。

<div id="header"> 
<header role="banner"> 
    <nav id="navigation" role="navigation"> 
     <ul> 
      <li> 
       <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> 
      </li> 
      <li><a href="#" title="About Us">About Us</a> 

      </li> 
      <li><a href="#" title="Biographies">Biographies</a> 

      </li> 
      <li><a href="#" title="Services">Services</a> 

      </li> 
      <li><a href="#" title="Careers">Careers</a> 

      </li> 
      <li><a href="#" title="Contact">Contact</a> 

      </li> 
     </ul> 
    </nav> 
    </header> 
</div> 

和CSS的樣子：

#header { 
     background-color: #cccccc; 
     padding: 5px 0; 
    } 
    header { 
     background-color: #f0f0f0; 
    } 
    header nav { 
     border: 1px solid red; 
    } 
    header nav ul { 
     margin: 0; 
     padding: 0; 
    } 
    header nav li { 
     display: inline; 
     margin: 0; 
     padding: 0; 
    } 
    header nav li img { 
     vertical-align: middle; 
     border: 1px solid blue; 
    } 
    header nav li a { 
     vertical-align: middle; 
     font-size: 1.00em; 
     text-decoration: none; 
     background-color: white; 
     color: black; 
     padding: 10px; 
     margin: 0 0 0 10px; 
    } 

的關鍵是將標誌圖像在列表中的第一個<li>元素。然後，您將列表中的所有元素顯示爲inline並使用vertical-align: middle排列它們。

您可以調整填充和邊距屬性以獲得所需的確切外觀。

小提琴供參考：http://jsfiddle.net/audetwebdesign/adW9Y/

注：
該代碼還適合於允許所述圖像尺寸以與視口比例。

加入以下CSS規則：

.autoSize { 
    width: inherit; 
} 
.autoSize img { 
    width: 25%; 
} 

並添加類至刻度式如下：

<li class="autoSize"> 
    <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> 
</li> 

由於ul元件擴展到視口的寬度，您可以將寬度繼承到包裝圖像的子元素li。然後設置圖像的相對寬度（本例中爲25％），並獲得靈活/靈敏的縮放比例。