Question

我试图在两个菜单列表之间放置一个徽标，但它不起作用。我事先做了一个PSD，这应该是它的样子：

enter image description here

但是，由于某种原因，我无法在html和css中完成此操作。以下是它现在的样子：

enter image description here

我该怎么做？它只是因为某些原因而无法工作。

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

如何让这个完美居中？

Answer 1

我实际上不会将菜单分成两部分。将它组合成一个部分，然后将一个中间LI设置为类，让我们说hspace并将padding-left（或右）应用于该类。然后绝对定位你的标志。
要将文字完美地置于LI中心，只需将text-align: center;应用于它。

Answer 2

http://jsfiddle.net/L2VrN/

我将徽标置于两个菜单之间。

为此，我使用left:50%在徽标周围放置另一个DIV，然后在徽标上留下负值以补偿其宽度。

您可能需要使用左/右值来显示菜单和徽标，以便准确定位您想要的位置。

Answer 3

这是如何集中你的ul ...

从“nav”中删除“margin：0 auto”，因为宽度为100％，所以不需要它，并且你想要将ul居中。

将正确的宽度设置为“UL”，它们使用'margin：0 auto'。

如何在两个菜单列表中间添加徽标？

3 个答案: