[英]Vertically Align Image and Text Inside a 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>
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;
}
目前他们没有对齐。 如何将导航中的段落标记与图像对齐?
你应该知道在导航中你几乎没有<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;
}
Roko的答案是经过验证的真实方法。 我也推荐它。 我想指出,在HTML 5中, <nav>
标签旨在替换导航菜单的修改无序列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.