Почему текст выравнивается по вертикали до середины

Question

Я пытаюсь создать заголовок, в котором будет логотип в крайнем левом углу, и навигационное меню в крайнем правом углу. Проблема, с которой я сталкиваюсь, - это вертикальное выравнивание изображения логотипа в навигационном меню. Я хотел бы, чтобы нижняя часть логотипа была вертикально выровнена с нижней частью элементов меню li (внизу, а не с текстом), но у меня возникли проблемы с этим.

Я думаю, что часть вопроса - это поплавки - логотип плавает влево, а улица плывет вправо.

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