html - 为什么文本垂直居中对齐

Question

我正在尝试创建一个标题，其中最左侧有一个 Logo ，最右侧有一个导航菜单。我遇到的问题是 Logo 图像与导航菜单的垂直对齐方式。我希望 Logo 的底部与 li 菜单元素的底部(底部，而不是文本底部)垂直对齐，但我很难做到这一点。

我认为部分问题在于 float - Logo 向左浮动，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

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

因为垂直对齐不适用于 float 元素

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