垂直对齐Div内的图像和文本

Question

I would like to position the image and the navigation links so that they are vertically aligned with the HeadContainer and each other.

HTML

<header>
<div id="HeadContainer">
  <img src="favicon.png" id="title"/>
  <nav>
    <p>Home</p>
    <p>About</p>
    <p>Portfolio</p>
    <p>Contact</p>
  </nav>
</div>
</header>

CSS:

#HeadContainer {
width:70%;
margin: 0 auto;
display: block;
}

header {
height: 60px;
}

nav {
    float: right;
}

nav p {
    display: inline;
    margin-left: 10px;
    font-size: 1.2em;
}

#title {
    float: left;
    width: 40px;
}

At the moment they are not aligned. How would I align the paragraph tags in the nav with the image?

Answer 1

You should know that inside a navigation you'll hardly have <p> elements. I don't see any reason Google also. So go with: http://jsbin.com/melag/2/edit

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

nav {
    float: right;
}
nav ul{
    list-style:none;
}
nav ul li{
    display:inline-block;
    vertical-align:middle;
}

Answer 2

Roko's answer is the tried and true method. I recommend it too. I want to point out that, in HTML 5, the <nav> tag is intended to replace a modified unordered list for navigation menus.

W3 Schools <nav> tag page