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

148

Мне нужно по центру выровнять горизонтальное меню.
Я пробовал различные решения, в том числе сочетание 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>

ОБНОВИТЬ

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

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

Стивен
источник
Центрировать текст в каждом LI или центрировать UL в DIV?
Joop

Ответы:

130

С http://pmob.co.uk/pob/centred-float.htm :

Посылка проста и в основном просто включает в себя плавающую обертку без ширины, которая плавает влево и затем сдвигается за пределы экрана в левую позицию ширины: относительная; Слева направо: -50%. Затем вложенный внутренний элемент переворачивается и применяется относительное положение + 50%. Это приводит к размещению мертвого элемента в центре. Относительное позиционирование поддерживает поток и позволяет другому контенту течь внизу.

Код

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

reisio
источник
9
Не могли бы вы добавить код или контекст к этому ответу, чтобы предотвратить гниение ссылок?
Nightfirecat
Решение прекрасно работает, и я прошу прощения спросить об этом после столь долгого времени, но что, если у меня выпадет css? Я не могу использовать переполнение: скрыто в родительском тогда. Но он все равно переполнится, как здесь: homeafrika.com .
Самия Рупонти
На самом деле не вижу переполнения на этом сайте. Я не уверен, что вам нужно переполнение: скрытый; в любом случае, хотя, поскольку это горизонтальное переполнение, вы всегда можете попробовать overflow-x: hidden; вместо. webchat.freenode.net/?nick=oerflowono&channels=#websites для помощи в режиме реального времени.
Reisio
1
Решение хорошо центрирует меню, но если у вас есть подменю, которые должны открываться в определенном фиксированном положении при наведении, вы обречены, поскольку position: relativeглавное меню меняет поведение position:absoluteподменю.
cweiske
1
@reisio Где находится #buttonsидентификатор в вопросе ОП? Где в вашем ответе замечание, что он должен это использовать? Как это можно принять и получить голос с наибольшим количеством голосов, если вы на самом деле не отвечаете на вопрос, а только цитируете не по теме бла-бла по какой-то ссылке?
Трейдер
90

Это работает для меня. Если я не истолковал ваш вопрос, вы можете попробовать.

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }
<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Робусто
источник
2
согласен с @cweiske. Простое использование text-align: центр на содержащем div решил проблему для меня
Ким Стэкс
Вам просто нужно убедиться, что любой текст внутри получаетtext-align: left;
Хуан Мендес
Это прекрасно! Но ul имеет отступ по умолчанию слева, что означает, что меню смещено вправо от центра. Вам нужно удалить отступ по умолчанию из ul с помощью padding-left: 0;
Итеративная цыганка
1
Совершенно лучший ответ, чем принятое решение, использование дисплея: inline делает свое дело. не используйте поплавок, это слишком сложно. Спасибо за понимание @Robusto
Clain Dsilva
выравнивание текста по центру в li не нужно
Aminah Nuraini
75

С CSS3 flexbox. Просто.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}
Дайси Накадзима
источник
6
Я определенно рекомендую этот метод
Карас
1
Я бы тоже рекомендовал этот метод поверх выбранного ответа.
mickburkejnr
У меня есть пиво!
Суяш Диксит
Я должен был сказать, что никогда не использовал flex прежде, чем оправдать содержание. Отличный ответ
Gman
Отличный ответ beero
Ilyas karim
20

Это самый простой способ, который я нашел. Я использовал ваш HTML. Заполнение просто для сброса настроек браузера по умолчанию.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}
<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>

Shawin
источник
9

Вот хорошая статья о том, как сделать это довольно надежно, без каких-либо взломов и полной поддержки кросс-браузер. Работает для меня:

-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

michaeldwp
источник
1
Можете ли вы опубликовать краткое изложение этого на случай, если ссылка не работает?
Алекс
2

Попробуй это:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
Sarfraz
источник
1
Это работает, чтобы центрировать UL. Но <LI> все еще остается слева. Я хочу, чтобы <LI> был центрирован внутри <UL>. Является ли это возможным?
Стивен
2

Делай это так :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

И CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}
Борис Гери
источник
2

Как и многие из вас, я боролся с этим некоторое время. Решение в конечном итоге было связано с div, содержащим UL. Все предложения по изменению отступов, ширины и т. Д. UL не имели никакого эффекта, но следовало следующее.

Это все о margin:0 auto;содержании div. Я надеюсь, что это поможет некоторым людям, и спасибо всем, кто уже предложил это в сочетании с другими вещами.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}
Нил Ганслав
источник
2

Демо - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Омг так намного чище.

grantex
источник
1

Вообще говоря, способ центрировать элемент уровня черного (например, a <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]), дефисов ("-"), подчеркиваний ("_") , двоеточия (":") и точки (".").

Ричард Дж.П. Ле Гуэн
источник
1

Я использовал свойство display: inline-block: решение состояло в том, чтобы использовать обертку с фиксированной шириной. Внутри ul блок с inline-блоком для отображения. Используя это, ul просто берет ширину для реального контента! и, наконец, поле: 0 auto, чтобы центрировать этот встроенный блок =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}
Дэвид
источник
0

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

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
nixis
источник
0
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

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

ruifn
источник
0

Решение @ Robusto было самым простым из того, что я пытался сделать, я предлагаю вам его использовать. Я пытался сделать то же самое для изображений в неупорядоченном списке, чтобы создать галерею ... Я сделал скрипку 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;
}
xanderoid
источник
0
ul{margin-left:33%}

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

Джон
источник
-2
.topmenu-design
{
    display: inline-table;
}

Все это!

Сатанист Васькин
источник