Центр Логотип в ул?

Question

Центр Логотип в ул?

0

Я знаю, что многие люди пытались это сделать, и разработали какую-то систему, которая только что сработала, или просто "пройти", но каков наилучший способ сделать это? У меня есть что-то почти полное, но по какой-то причине логотип не центрирован, а целая ul в целом. Это то, что я получаю.

Но это то, что я получаю, когда длина текста такая же:

Вот мой html:

<div class="navbar">

    <ul>

        <li>
            <a class="navbarLinks" href="#">Big Text Here</a>
        </li>

        <li>
            <a class="navbarLogo" href="/"><img src="images/logo.png" width="100"></a>
        </li>

        <li>
            <a class="navbarLinks" href="#">Small Text</a>
        </li>

    </ul>

    <div class="divider"></div>

</div>

И мой css:

.navbar
{
    margin:0 auto;
    text-align: center;
    z-index: 9999;
    margin-top: 10px;
}

.navbar ul
{
    display: inline-block;
    list-style-type: none;
    margin:0 auto;
    padding: 0px;
}

.navbar li
{
    display: inline-block;
    list-style-type: none;
    vertical-align: middle;
}

.navbarLinks
{
    color:#ccc;
    margin: 20px;
    text-align:center;
    display:block;  
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-decoration: none;  
    font-family: arial;
    font-size: 20pt;
    font-weight: bold;
}

.navbarLinks:hover
{
    color:#fff;
}

.navbarLogo
{
    padding-bottom: 0px;
    text-align: center;
}

Как я могу исправить свой код?

Hunter Mitchell 05 нояб. 2013, в 01:33

Источник

0

решается с помощью flexbox , если вы не против отказаться от IE 9 и ниже.
Eevee 05 нояб. 2013, в 00:01
0

Мне это нужно. Есть ли способ CSS?
Hunter Mitchell 05 нояб. 2013, в 00:05
0

flexbox - это css :), совсем недавно.
Eevee 05 нояб. 2013, в 00:18
0

Можете ли вы связать меня с jsfiddle?
Hunter Mitchell 05 нояб. 2013, в 00:24

Показать ещё 2 комментария

Теги:

html

css

css3

navigation

1 ответ

Ещё вопросы

решается с помощью flexbox , если вы не против отказаться от IE 9 и ниже.

Eevee · Answer 1 · 2013-11-04T22-51-00.000Z

Самый простой способ, хотя и гигантский взлом, состоит в том, чтобы просто дать левую и правую <li> процентную width, скажем, 40% или около того. Тогда они останутся одного и того же размера, оставив немного пробела для логотипа посередине.

Лучший способ - использовать flexbox, который позволяет вам прямо сказать, что вы хотите, т.е. разделить любое дополнительное пространство между двумя текстовыми частями:

.navbar ul {
    display: flex;
}
.navbar li.navbarLinks {
    flex: 1;
}

Это просто говорит: ul должен быть flexbox (что означает, что все его дети должны сидеть в строке и заполнять свободное пространство), и любое дополнительное пространство должно быть предоставлено ссылкам в соотношении 1:1.

Здесь дерьмовая скрипка.

Недостатком является то, что это работает только в довольно недавних браузерах, и в частности IE10 был первым IE, который его поддерживал. И было три пересмотра синтаксиса, поэтому вам также нужно будет поддерживать их, возможно, с помощью чего-то вроде Sass flex mixin (это полезная ссылка, даже если вы пишете статический CSS).

С другой стороны, вы можете использовать оба подхода. Браузеры, которые не понимают flexbox, будут подчиняться inline-block вместо этого и просто видят немного нецентральный логотип.

Это один из способов, но я хочу, чтобы это был не взлом