Мне нужно по центру выровнять горизонтальное меню.
Я пробовал различные решения, в том числе сочетание 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 для этого?
Ответы:
С http://pmob.co.uk/pob/centred-float.htm :
Код
источник
position: relative
главное меню меняет поведениеposition:absolute
подменю.#buttons
идентификатор в вопросе ОП? Где в вашем ответе замечание, что он должен это использовать? Как это можно принять и получить голос с наибольшим количеством голосов, если вы на самом деле не отвечаете на вопрос, а только цитируете не по теме бла-бла по какой-то ссылке?Это работает для меня. Если я не истолковал ваш вопрос, вы можете попробовать.
источник
text-align: left;
С CSS3 flexbox. Просто.
источник
Это самый простой способ, который я нашел. Я использовал ваш HTML. Заполнение просто для сброса настроек браузера по умолчанию.
источник
Вот хорошая статья о том, как сделать это довольно надежно, без каких-либо взломов и полной поддержки кросс-браузер. Работает для меня:
-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
источник
Попробуй это:
источник
Делай это так :
И CSS:
источник
Как и многие из вас, я боролся с этим некоторое время. Решение в конечном итоге было связано с div, содержащим UL. Все предложения по изменению отступов, ширины и т. Д. UL не имели никакого эффекта, но следовало следующее.
Это все о
margin:0 auto;
содержании div. Я надеюсь, что это поможет некоторым людям, и спасибо всем, кто уже предложил это в сочетании с другими вещами.источник
Демо - http://codepen.io/grantex/pen/InLmJ
Омг так намного чище.
источник
Вообще говоря, способ центрировать элемент уровня черного (например, a
<ul>
) - этоmargin:auto;
свойство.Для выравнивания текстовых и встроенных элементов уровня используйте элемент уровня блока
text-align:center;
. Так что все вместе что-то вроде ...... должно сработать.
Крайний случай - Internet Explorer6 ... или даже другие IE, когда не используется
<!DOCTYPE>
. IE6 неправильно выравнивает элементы уровня блока, используяtext-align
. Так что, если вы ищете поддержку IE6 (или не используете<!DOCTYPE>
), ваше полное решение ...Как сноска, я думаю, что
id="topmenu firstlevel"
недействительным, так какid
атрибут не может содержать пробелы ...? Действительно рекомендация w3c определяет наid
атрибут как тип «имя» ...источник
Я использовал свойство display: inline-block: решение состояло в том, чтобы использовать обертку с фиксированной шириной. Внутри ul блок с inline-блоком для отображения. Используя это, ul просто берет ширину для реального контента! и, наконец, поле: 0 auto, чтобы центрировать этот встроенный блок =)
источник
Я использую код JQuery для этого. (Альтернативное решение)
источник
ul, поскольку inline-таблица исправляет проблему. Я использовал родительский div для выравнивания текста по центру. так выглядит хорошо даже на других языках (перевод, разной ширины)
источник
Решение @ Robusto было самым простым из того, что я пытался сделать, я предлагаю вам его использовать. Я пытался сделать то же самое для изображений в неупорядоченном списке, чтобы создать галерею ... Я сделал скрипку js, чтобы дурачиться с ней. Не стесняйтесь попробовать это здесь.
[он был настроен с использованием примера кода robusto]
HTML:
CSS:
источник
Приличное приближение на больших экранах. Это не хорошо, но хорошо грязное исправление.
источник
Все это!
источник