我在搜索SO时遇到了一些例子，但是对我（作为一个初学者）来说，实现这一点的最佳实践还不是很清楚。
我想将徽标放在导航栏的中间，其中2个链接指向图像的居中位置，2个链接居中于右侧，这样我的4个链接就可以使徽标的中心与4个链接水平对齐。
供您参考：http : //jsfiddle.net/8fc0e632/
HTML:
<body>
<nav class="menubar">
<div id= "navmenu">
<ul>
<li><a href="Info.html">Over ons</a></Li>
<Li><a href="Menu.html">Menukaart</a></Li>
<li><a class="logo" href="Info.html"><img src="http://i.imgur.com/WwCbbpG.jpg" alt="First8 Logo"></a></li>
<Li><a href="Ontbijtmanden.html">Ontbijtmanden</a></Li>
<Li><a href="Contact.html">Contacteer ons</a></Li>
</ul>
</div>
</nav>
CSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic);
.body {
font-family: "Open Sans";
}
.menubar {
background: rgb(228, 6, 19);
box-shadow: 0 1px 3px #999;
font-family: inherit;
}
.menubar ul {
display: block;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
.menubar ul li {
display: inline;
list-style: none;
}
.menubar ul li a {
text-decoration: none;
color: white;
padding: 0 15px 0 0;
font-family: "Open Sans"
}
.logo img {
margin: 10px auto 0px auto;
display: block;
width:220px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句