將NAV垂直對齊到頭部

Question

我有一個固定的頭部，其中有一個<nav>。問題是我嘗試了很多東西，但是我的元素不能在中間垂直對齊。我不能使用line-height，因爲它取決於屏幕分辨率。

CSS

header { 
    width: 100%; 
    height: 15%; 
    background-color: rgba(30, 30, 30, 0.75); 
    color: white; 
    font-family: 'Roboto', sans-serif; 
    font-weight: bold; 
    text-align: center; 
    position: fixed; 
    text-transform: uppercase; 
    overflow: hidden; 
} 

header nav { 
    text-align: center; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: 0; 

} 

header nav a { 
    /*line-height: 6;*/ 
    color: white; 
    padding: 14px 16px; 
    text-align: center; 
    display: inline; 
    text-decoration: none; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

HTML

<header> 
    <div> 
     <nav> 
      <a class="active" href="">Home</a> 
      <a href="">News</a> 
      <a href="">Info</a> 
      <a href="">Contact</a> 
     </nav> 
    </div> 
</header> 

演示：http://jsfiddle.net/JJ8Jc/4082/

Answer 1

可以使用顯示器撓性方法來垂直和/或水平對齊元件

我只是說

header nav { 
display:flex; 
justify-content: center; 
align-items: center; 
} 

所以你比如現在變成：

header { 
 
    width: 100%; 
 
    height: 15%; 
 
    background-color: rgba(30, 30, 30, 0.75); 
 
    color: white; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    position: fixed; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
    display:flex; 
 
} 
 

 
header nav { 
 
    text-align: center; 
 
    display:flex; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
header nav a { 
 
    /*line-height: 6;*/ 
 
    color: white; 
 
    padding: 14px 16px; 
 
    text-align: center; 
 
    display: inline; 
 
    text-decoration: none; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -ms-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
}

<header> 
 
    <div> 
 
     <nav> 
 
      <a class="active" href="">Home</a> 
 
      <a href="">News</a> 
 
      <a href="">Info</a> 
 
      <a href="">Contact</a> 
 
     </nav> 
 
    </div> 
 
</header>

Answer 2

您.nav CSS，改變top: 0;爲top: 50%;然後將這些行：

-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 

和remov Ëbottom: 0;

jsfiddle

或者，你可以使用padding-bottom和padding-top增加頭大小保持在中間的內容。或者，讓它像其他答案已經建議的那樣彎曲。

header { 
 
    width: 100%; 
 
    height: 15%; 
 
    background-color: rgba(30, 30, 30, 0.75); 
 
    color: white; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    position: fixed; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
} 
 

 
header nav { 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    right: 0; 
 
    left: 0; 
 
    margin: 0; 
 
} 
 

 
header nav a { 
 
    /*line-height: 6;*/ 
 
    color: white; 
 
    padding: 14px 16px; 
 
    text-align: center; 
 
    display: inline; 
 
    text-decoration: none; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -ms-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
}

<header> 
 
    <div> 
 
     <nav> 
 
      <a class="active" href="">Home</a> 
 
      <a href="">News</a> 
 
      <a href="">Info</a> 
 
      <a href="">Contact</a> 
 
     </nav> 
 
    </div> 
 
</header>