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> tag page

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

2 个答案: