如何在两个菜单列表中间有一个徽标？
我试图在两个菜单列表之间放置一个徽标，但它不起作用。我事先制作了一个 PSD，它应该是这样的：
但是，我就是不能由于某种原因，在 html 和 css 中完成此操作。现在看起来是这样的：
我该怎么做？它只是由于某种原因无法工作。
我的 HTML：
<body>
<div class="nav">
<div class="container">
<div class="menu-left">
<ul>
<li><a id="hello" href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
</ul>
</div>
<div class="logo"></div>
<div class="menu-right">
<ul>
<li><a id="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
我的 CSS：
div {
display: block;
}
.nav {
height: 64px;
background: url(navigation_bg.png);
width: 100%;
margin:0 auto;
}
.container {
width: 960px;
position: relative;
margin:0 auto;
}
.menu-left, .menu-right {
width: 300px;
height: 64px;
position: absolute;
top: 0;
}
.menu-left {
left: 200px;
}
.menu-right {
right: 200px;
}
.nav ul {
list-style:none;
margin: 0;
padding: 0;
height: 64px;
line-height: 64px;
}
.nav ul li {
float: left;
font-family: 'FuturaStdBoldCondensed';
font-size: 20px;
text-shadow: 1px 1px 1px black;
text-transform: uppercase;
margin:0 20px;
}
.menu-right ul li {
float: right;
}
.logo {
margin: 0 auto;
width: 140px;
height: 128px;
background: url(logo.png) center center rgba(0,0,0, 0.4);
border-radius: 0 0 20px 20px;
}
如何使其完美居中？
I am trying to put a logo between two menu lists, but it isnt working. I made a PSD before hand and this is what it is supposed to look like:
However, I just cant accomplish this in html and css for some reason. Here is what it looks like right now:
How am I supposed to do this? It just wont work for some reason.
My HTML:
<body>
<div class="nav">
<div class="container">
<div class="menu-left">
<ul>
<li><a id="hello" href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
</ul>
</div>
<div class="logo"></div>
<div class="menu-right">
<ul>
<li><a id="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
My CSS:
div {
display: block;
}
.nav {
height: 64px;
background: url(navigation_bg.png);
width: 100%;
margin:0 auto;
}
.container {
width: 960px;
position: relative;
margin:0 auto;
}
.menu-left, .menu-right {
width: 300px;
height: 64px;
position: absolute;
top: 0;
}
.menu-left {
left: 200px;
}
.menu-right {
right: 200px;
}
.nav ul {
list-style:none;
margin: 0;
padding: 0;
height: 64px;
line-height: 64px;
}
.nav ul li {
float: left;
font-family: 'FuturaStdBoldCondensed';
font-size: 20px;
text-shadow: 1px 1px 1px black;
text-transform: uppercase;
margin:0 20px;
}
.menu-right ul li {
float: right;
}
.logo {
margin: 0 auto;
width: 140px;
height: 128px;
background: url(logo.png) center center rgba(0,0,0, 0.4);
border-radius: 0 0 20px 20px;
}
How do I get this perfectly centered?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我实际上不会将菜单分成两部分。将其做成一体，然后将中间的 LI 之一设置为类，例如
hspace并将padding-left（或 right）应用于该类。然后绝对放置您的徽标。要将文本在 LI 中完美居中，只需应用
text-align: center;即可。I wouldn't actually separate menu into two pieces. Make it in one piece, and then set one of the middle LI to class lets say
hspaceand applypadding-left(or right) to that class. Then absolutely postion your logo.To perfectly center the text in LI, just apply
text-align: center;to it.http://jsfiddle.net/L2VrN/
我的徽标位于两个菜单之间的中心。
为此，我在徽标周围放置了另一个 DIV，其中包含
left:50%，然后在徽标上添加一个负值 left 以补偿其宽度。您可能需要调整菜单和徽标的左/右值，才能准确定位到您想要的位置。
http://jsfiddle.net/L2VrN/
I got the logo centered in between the two menus.
To do this, I put another DIV around the logo with
left:50%and then a negative value for left on the logo to compensate for it's width.You might have to play around with your left/right values for your menus and logo to get the positioning exactly where you want it.
这是如何将 ul 居中...
从“nav”中删除“margin:0 auto”，不需要它，因为宽度是 100%，并且您想要将 ul 居中。
将正确的宽度设置为“UL”，并在其上使用“margin：0 auto”。
This is how to center your ul...
Remove the "margin:0 auto" from the "nav", there's no need for it as the width is 100%, and you want to center the ul.
Set the right width to the "UL" them use the 'margin: 0 auto" on it.