为什么文本垂直居中对齐

Question

I'm trying to create a header in which there would be a logo to the far left, and a nav menu to the far right. The problem i'm having is the vertical alignment of the logo image to the nav menu. I would like the bottom of the logo to vertically align with the bottom of the li menu elements (bottom, not text-bottom), but I am having trouble accomplishing that.

I think part of the issue is the floats - logo is floated to the left, ul is floated to the right.

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

set margin-top:10px for ul li then give padding: 10px 0 for 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

instead float - use display: inline-block;

because vertical alignment doesn't work with floated elements

 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