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

我想定位图像和导航链接，以便它们与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>

---

目前，它们没有对齐。如何将导航中的段落标记与图像对齐？

您应该知道，在导航中几乎没有

元素。我看不出谷歌也有什么理由。因此，请继续：

Roko的答案是久经考验的真实方法。我也推荐它。我想指出的是，在HTML5中，
标记用于替换导航菜单的修改无序列表

OP，用于垂直对齐徽标图像。在样式表中，添加“position:relative；顶部：10倍于标题。非常感谢！这已经困扰了我好几天了。有几种方法可以垂直对齐这一组。Roko answer实际上并不是其中之一，但它依赖于ul元素的一个相当偶然的默认上边距，通过将p元素设置为
display:inline block
，可以或多或少地复制它。不过，通常情况下，内联元素在流中垂直对齐，并在同一行上彼此对齐。浮动元素将它们从流中移除，因此它们无法自然垂直对齐，而您只能通过填充顶部、边距顶部、顶部等手动将它们移动到位。谢谢！你是说我用错标签了吗？我以为我用对了你用得很好。您实现它的方式是创建导航菜单的“最流行”方式。然而，较新的HTML5规范建议使用新的
标记，而不是无序列表。基本上，它是官方的“无序列表作为导航部分”标签。
#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;
}

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