Как разместить логотип в середине двух списков меню? - PullRequest
Новая
       30

Как разместить логотип в середине двух списков меню?

0 голосов
/ 27 января 2012

Я пытаюсь поместить логотип между двумя списками меню, но он не работает. Я сделал 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;
}

Как мне получить это по центру?

Ответы [ 3 ]

1 голос
/ 27 января 2012

http://jsfiddle.net/L2VrN/

Я получил логотип по центру между двумя меню.

Для этого я поместил еще один DIV вокруг логотипа с left:50%, а затем отрицательное значение слева на логотипе, чтобы компенсировать его ширину.

Возможно, вам придется поэкспериментировать со своими левыми / правыми значениями для меню и логотипа, чтобы получить точное позиционирование.

1 голос
/ 27 января 2012

Вот как центрировать ваш уль ...

Удалите «margin: 0 auto» из «nav», в этом нет необходимости, поскольку ширина равна 100%, и вы хотите отцентрировать ul.

Установите правильную ширину для "UL", для этого используйте 'margin: 0 auto'.

1 голос
/ 27 января 2012

  1. Я бы на самом деле не разделил меню на две части. Сделайте это одним куском, а затем установите один из средних LI в класс, скажем, hspace и примените padding-left (или вправо) к этому классу. Тогда обязательно разместите ваш логотип.

  2. Чтобы идеально отцентрировать текст в LI, просто примените к нему text-align: center;.

...