Можете ли вы помочь мне центрировать элемент <ul> с помощью CSS?

Я озадачился чем-то, что должно быть очень просто, но после бесплодных трех часов я еще не решил:

Друг попросил меня исправить шаблон его веб-сайта WordPress, чтобы горизонтальная панель меню навигации была горизонтально расположена на странице. Он хочет, чтобы он плотно прилегал к нижней части красной секции - тогда он просто поместился между двумя эмблемами по обе стороны от красной страницы.

Красная секция (class="header") имеет text-align, установленную на center. Это кажется достаточно хорошим, чтобы гарантировать, что заголовок и текст описания под ним выравниваются по центру, но по какой-то причине я не могу сделать меню (которое является ul) совпадающим с центром страницы.

Кто-нибудь хотел бы предположить, что я делаю неправильно? Почему я не могу получить меню в центре? Что мне нужно изменить в стиле, чтобы заставить его работать?

Ответ 1

Чтобы центрировать ряд блоков, вы должны использовать встроенный блок:

ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }

IE не понимает встроенный блок, но если вы установите его в строке только для IE, он все равно будет вести себя как встроенный блок:

<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->

Ответ 2

1 Напишите style="text-align: center;" в родительский div из ul

2 Запишите style="display: inline-table;" в ul

2 Напишите style=" display: inline;" - li

<div class="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
  </ul>
</div>

<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>

Готово

Ответ 3

Лучший способ сделать это:

Оберните ul в новый div id = "topmenu" или что-то в этом роде, затем дайте следующие стили

bottom:0;
position:absolute;
width:780px;

и дать ul.menu это

margin:0 auto;
width:535px;

Единственная проблема заключается в том, что вы устанавливаете ширину списка меню, поэтому, если ширина элементов меню изменится, ее также необходимо будет изменить в файле CSS (т.е. при добавлении нового элемента меню).

ОБНОВЛЕНИЕ: Просто заметил ваш комментарий выше о том, чтобы не устанавливать ширину вручную. Если вы захотите использовать небольшой бит javascript, вы можете вставить его внутри готового блока документа и удалить width: 535px;

var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);

Это установит свойство ширины css в фактическую отображаемую ширину после загрузки страницы, поэтому макет будет работать.

Выполните HTML-код ниже:

<div id="header">
    <h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
    <p class="description">A Website by Frank Key</p>
    <div id="topmenu">
        <ul class="menu">
        <li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>      
        <li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
        <li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>    
    </ul>
</div>
</div>

Ответ 4

указанная ширина для ul ul{ width:700px; margin:0 auto;}

Ответ 5

Поскольку он позиционируется как абсолютный, вы можете дать ему левый атрибут:

.menu {left: 125px; }

125 пикселей или около того должны быть хорошими