爲什麼文本垂直對齊到中間

Question

我正在嘗試創建一個標頭，其中最左邊會有一個徽標，最右邊是一個導航菜單。我遇到的問題是徽標圖像與導航菜單的垂直對齊。我希望徽標的底部與li菜單元素的底部垂直對齊（底部，而不是文本底部），但我無法完成此操作。

我認爲問題的一部分是浮動 - 標誌漂浮在左邊，ul漂浮在右邊。

HTML/CSS

html { 
 
    height: 100%; 
 
    font-size: 16px; 
 
} 
 
body { 
 
    background: #fff url('images/background.jpg') no-repeat bottom fixed; 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    -webkit-background-size: cover; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    font-size: 62.5%; 
 
} 
 
header { 
 
    position: fixed; 
 
    width: 95%; 
 
    margin: 0 auto; 
 
    top: 26px; 
 
    display: inline-block; 
 
    padding-bottom: 16px; 
 
    border-bottom: 1px solid #959595; 
 
} 
 
.nav ul { 
 
    float: right; 
 
} 
 
.nav li { 
 
    float: left; 
 
    padding-right: 40px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
    font-size: 2.2em; 
 
} 
 
.nav li a { 
 
    text-decoration: none; 
 
    color: #a1a1a1; 
 
} 
 
.container { 
 
    width: 95%; 
 
    margin: 0 auto; 
 
} 
 
.logo { 
 
    float: left; 
 
}

<div class="container"> 
 
    <header> 
 

 
    <div class="nav"> 
 
     <img class="logo" src="http://www.placehold.it/80"> 
 
     <ul> 
 
     <li><a href="bio.html">bio</a> 
 
     </li> 
 
     <li><a href="calendar.html">calendar</a> 
 
     </li> 
 
     <li><a href="media.html">media</a> 
 
     </li> 
 
     <li><a href="contact.html">contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</div>

Answer 1

設置margin-top:10px爲ul li然後給padding: 10px 0爲header

html { 
 
    height: 100%; 
 
    font-size: 16px; 
 
} 
 
body { 
 
    background: #fff url('images/background.jpg') no-repeat bottom fixed; 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    -webkit-background-size: cover; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    font-size: 62.5%; 
 
} 
 
header { 
 
    border-bottom: 1px solid #959595; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 20px 0; 
 
    position: fixed; 
 
    top: 26px; 
 
    width: 95% 
 
} 
 
.nav ul { 
 
    float: right; 
 
    margin-top: 15px; 
 
} 
 
.nav li { 
 
    float: left; 
 
    padding-right: 40px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
    font-size: 2.2em; 
 
} 
 
.nav li a { 
 
    text-decoration: none; 
 
    color: #a1a1a1; 
 
} 
 
.container { 
 
    width: 95%; 
 
    margin: 0 auto; 
 
} 
 
.logo { 
 
    float: left; 
 
}

<div class="container"> 
 
    <header> 
 

 
    <div class="nav"> 
 
     <img class="logo" src="http://lorempixel.com/50/50"> 
 
     <ul> 
 
     <li><a href="bio.html">bio</a> 
 
     </li> 
 
     <li><a href="calendar.html">calendar</a> 
 
     </li> 
 
     <li><a href="media.html">media</a> 
 
     </li> 
 
     <li><a href="contact.html">contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</div>

Answer 2

代替float - 使用display: inline-block;

，因爲垂直對齊不浮動元素

html { 
 
    height: 100%; 
 
    font-size: 16px; 
 
} 
 
body { 
 
    background: #fff url('images/background.jpg') no-repeat bottom fixed; 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    -webkit-background-size: cover; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    font-size: 62.5%; 
 
} 
 
header { 
 
    position: fixed; 
 
    width: 95%; 
 
    margin: 0 auto; 
 
    top: 26px; 
 
    display: inline-block; 
 
    padding-bottom: 16px; 
 
    border-bottom: 1px solid #959595; 
 
} 
 
.nav .logo, 
 
.nav ul { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0;  
 
} 
 
.nav ul{ 
 
    text-align: right; 
 
    width: calc(100% - 120px); 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0 20px; 
 
    font-family:'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
    font-size: 2.2em; 
 
} 
 
.nav li a { 
 
    text-decoration: none; 
 
    color: #a1a1a1; 
 
} 
 
.container { 
 
    width: 95%; 
 
    margin: 0 auto; 
 
}

<div class="container"> 
 
    <header> 
 
     <div class="nav"> 
 
      <img class="logo" src="http://www.placehold.it/80" /> 
 
      <ul> 
 
       <li><a href="bio.html">bio</a></li> 
 
       <li><a href="calendar.html">calendar</a></li> 
 
       <li><a href="media.html">media</a></li> 
 
       <li><a href="contact.html">contact</a></li> 
 
      </ul> 
 
     </div> 
 
    </header> 
 
</div>

Fiddle

工作