Как выровнять по центру горизонтальное <UL>меню? - PullRequest
Новая
       31

Как выровнять по центру горизонтальное <UL>меню?

145 голосов
/ 19 мая 2010

Мне нужно выровнять горизонтальное меню по центру.
Я пробовал различные решения, в том числе сочетание inline-block / block / center-align и т. Д., Но не удалось.

Вот мой код: 

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

Я знаю, как выровнять ul по центру div. Это может быть достигнуто с помощью предложения Сарфраза. Но элементы списка все еще находятся в пределах ul.

Нужен ли мне Javascript для этого?

Ответы [ 16 ]

1 голос
/ 19 мая 2010

Вообще говоря, способ центрировать элемент уровня черного (например, <ul>) использует свойство margin:auto;.

Чтобы выровнять текстовые и встроенные элементы уровня внутри элемента уровня блока, используйте text-align:center;. Так что все вместе что-то вроде ... 

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... должно работать.

Крайний случай - Internet Explorer6 ... или даже другие IE, когда не используется <!DOCTYPE>. IE6 неправильно выравнивает элементы уровня блока, используя text-align. Поэтому, если вы ищете поддержку IE6 (или не используете <!DOCTYPE>), ваше полное решение ... 

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

В качестве сноски я думаю, что id="topmenu firstlevel" недопустим, поскольку атрибут id не может содержать пробелы ...? Действительно, рекомендация w3c определяет атрибут id как имя типа ...

Жетоны ID и NAME должны начинаться с буква ([A-Za-z]) и может сопровождаться по любому количеству букв, цифр ([0-9]), дефисы ("-"), подчеркивание ("_"), двоеточия (":") и точки ( "").

0 голосов
/ 02 февраля 2015 
ul{margin-left:33%}

Приличное приближение на больших экранах. Это не хорошо, но исправлено.

0 голосов
/ 02 сентября 2014 
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul, поскольку inline-таблица исправляет проблему с. Я использовал родительский div для выравнивания текста по центру. так выглядит хорошо даже на других языках (перевод, разной ширины)

0 голосов
/ 27 августа 2014 
.topmenu-design
{
    display: inline-table;
}

Вот и все!

0 голосов
/ 01 июля 2014

Я использую код JQuery для этого. (Альтернативное решение) 

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
0 голосов
/ 22 апреля 2014

@ Решение Робусто было самым простым из того, что я пытался сделать, я предлагаю вам использовать его. Я пытался сделать то же самое для изображений в неупорядоченном списке, чтобы создать галерею ... Я сделал скрипку js, чтобы дурачиться с ней. Не стесняйтесь попробуйте здесь.

[он был настроен с использованием образца кода robusto]
HTML: 

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>


CSS: 

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}
Страница:
...