为什么文本垂直对齐到中间

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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