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

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

49 голосов
/ 13 февраля 2009

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

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

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

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

Ответы [ 5 ]

74 голосов
/ 13 февраля 2009

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

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]-->
34 голосов
/ 30 августа 2012

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>

Конец

0 голосов
/ 24 марта 2014

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

0 голосов
/ 13 февраля 2009

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

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

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

и дайте уль.меню это 

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>
0 голосов
/ 13 февраля 2009

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

.menu {слева: 125 пикселей; }

125px или около того должно быть хорошо

...