如何使頂部導航與徽標垂直居中？

Question

我想讓垂直居中的頂層菜單沒有像margin-top: 50px;這樣的值，因爲我的一些朋友說這不是理想的方法。

/* Nav Section */ 
 
.nav { 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav-contain { 
 
    width: 1100px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
.logo { 
 
    z-index: 10; 
 
    display: inline-block; 
 
    background: #2980B9; 
 
    padding: 65px 50px 35px 45px; 
 
    font-size: 36px; 
 
    line-height: 42px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
.logo a { 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
} 
 
#medical { 
 
    display: block; 
 
    text-transform: uppercase; 
 
} 
 
.menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    float: right; 
 
    display: table-cell; 
 
    position: relative; 
 
} 
 
.menu a { 
 
    text-decoration: none; 
 
    color: #505050; 
 
    font-weight: bold; 
 
} 
 
.menu ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    float: left; 
 
    top: 50%; 
 
} 
 
.menu ul ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.menu ul li { 
 
    float: left; 
 
    display: block; 
 
    margin-left: 45px; 
 
} 
 
.menu ul ul { 
 
    position: absolute; 
 
    left: -999px; 
 
} 
 
.menu ul li:hover ul { 
 
    left: auto; 
 
} 
 
.menu ul li ul li { 
 
    margin-left: 0; 
 
    float: none; 
 
    margin-top: 15px; 
 
}

<div class="nav"> 
 
    <div class="nav-contain"> 
 
     <div class="logo"> 
 
      <a href="#"><span id="medical">Medical</span><span id="company"> Company</span></a> 
 
     </div> 
 
     <!-- Logo --> 
 
     <div class="menu"> 
 
      <ul> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">About</a> 
 
        <ul class="dropdown"> 
 
         <li><a href="#">Sample</a></li> 
 
         <li><a href="#">Sample</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Gallery</a></li> 
 
       <li><a href="#">Prices</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
     <!-- Menu --> 
 
    </div> 
 
    <!-- Nav Contain --> 
 
</div> 
 
<!-- Nav -->

Answer 1

上.menu刪除float:right，並設置兩個.logo和.menu這樣：

.logo, .menu { 
    display: inline-block; 
    vertical-align: middle; 
} 

如果需要.menu留在最右側，還補充一點：

.nav-contain { 
    text-align: justify; 
} 
.nav-contain:after{ 
    content: ''; 
    display: inline-block; 
    width: 100%; 
} 

工作原理：

1. 集text-align: justify;會排隊兩個內側內嵌模塊到左側和容器的右邊緣。

2. 使用:after或:before創建一個不可見的100％寬度元素或:before拉伸該框以佔據容器的整個空間的僞元素。否則內聯元素只佔用由定義內聯元素的標籤所界定的空間。

Answer 2

一個簡單的方法在這裏Center是用來實現Flexbox：

.nav-contain { 
    /* what is already there */ 
    display: flex; 
    align-items: center; 
} 

謹防瀏覽器支持（檢查caniuse.com，看是否兼容級別是您可以接受）。

這比margin-top解決方案更優越，因爲它確保您不必每次在圖像大小或導航欄中的任何其他位置更改時手動更改該50px。

Answer 3

嘗試：

.menu > ul > li { 
    min-height:50px; 
    display: table; 
} 
.menu > ul > li > a { 
    display: table-cell; 
    vertical-align: middle; 
} 

http://jsfiddle.net/rawat/4h05rq2s/

Answer 4

由於您的導航欄保持在同一高度的全部時間，我建議你給.nav-contain下面的代碼：

.nav-contain { 
    width: 1100px; 
    margin: 0 auto; 
    line-height: 184px; 
    padding: 0; 
    overflow: hidden; 
} 

注意線 - 高度。 這會，一旦你縮小你的設備的可用寬度，導致一個可能不那麼好看的巨大導航欄。爲此，我建議媒體查詢。