垂直居中于css

Question

我试图将div中包含的一些文本垂直居中于另一个div中。对于我的生活，我无法让它发挥作用。

Here是代码的JSfiddle。我希望这两段文字在页面顶部和底部边框底部之间垂直居中。

    	.logo1 {
    	  font-family: Helvetica;
    	  font-size: 36px;
    	  letter-spacing: -0.05em;
    	  text-align: left;
    	  display: inline-block;
    	  width: 525px;
    	}
    	.orange {
    	  color: #e68217;
    	  font-weight: bold;
    	}
    	.nav {
    	  color: black;
    	  font-family: Helvetica;
    	  font-size: 18px;
    	  font-weight: bold;
    	  letter-spacing: -0.05em;
    	  text-align: right;
    	  width: 300px;
    	  display: inline-block;
    	}
    	div.head {
    	  margin: auto;
    	  width: 850px;
    	  height: 100px;
    	  border-bottom: 3px solid #cccccc;
    	}
    	

<div class="head">
  <div class="logo1">
    foo<span class="orange">bar</span>
  </div>

  <div class="nav">
    <a href="#">portfolio</a>
    <span style="color: #cccccc">|</span>
    <a href="#">about me</a>
    <span style="color: #cccccc">|</span>
    <a href="#">contact me</a>
  </div>
</div>

Answer 1

使用以下CSS代码：

.nav {
    color: black;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: bold; 
    letter-spacing: -0.05em;
    text-align: right;
    display: inline-block;
    vertical-align:middle;
    width: 300px;
    padding-top:38px;
}