垂直對齊Div內的圖像和文本

Question

我想定位圖像和導航鏈接，使它們與HeadContainer和彼此垂直對齊。

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

目前他們沒有對齊。 如何將導航中的段落標記與圖像對齊？

Answer 1

你應該知道在導航中你幾乎沒有<p>元素。 我也沒有看到谷歌的任何原因。 所以請訪問： 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的答案是經過驗證的真實方法。 我也推薦它。 我想指出，在HTML 5中， <nav>標簽旨在替換導航菜單的修改無序列表。

W3 Schools <nav>標簽頁