Рассмотрим самые простые и элегантные методы расположения ul по центру страницы.

Пример первый, центрирование ul меню с фиксированной длинной.

   Здесь, впрочем, всё просто. Для этого нам понадобится всего лишь несколько css правил.

   Допустим, наше меню выглядит так:

HTML:

<div class="menu-holder">
<ul class="menu">
 <li><a href="#" class="first">Пункт первый</a></li>
<li><a href="#">Пункт второй</a></li>
<li><a href="#" class="last">Пункт третий</a></li>
</ul>
</div>

   Зададим menu-holder 100% ширину. И присвоим text-align: center для внутренних элементов (что позволит нам расположить пункты меню по центру в Internet Explorer). Ul присвоим ширину в 400 пикселей, назначим блочный вид (display: block) и установим отступы margin: 0 auto (позволит отцентрировать нам меню в других браузерах). Дочерним элементам списка li зададим фиксированную длину, блочный вид (display: block) и назначим обтекание текстом по левому краю (float: left):

Что получилось?

CSS:

    .menu-holder{
        width: 400px;
        text-align: center;
        border: 1px solid #000;
        clear: both;
        float: none;
        margin: 0 auto;
    }
    .menu-holder ul.menu{
        display: block;
        width: 400px;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        height: 27px;
        list-style: none;
    }
    .menu-holder ul.menu li{
        display: block;
        float: left;
        width: 120px;
        border: none;
        border-right: 1px solid #000;
        height: 27px;
        text-align: center;
        padding: 0 5px;
        list-style: none;
        background: none;
    }
    .menu-holder ul.menu li.last{
        border-right: none;
    }

Что же делать, когда заранее ширина меню ul не известна.

   Есть множество способов, например с двумя внешними блоками и центрированием путём отрицательных отступов (как то сложно, и выглядит в некоторых случаях очень неожиданно). Но самое простое решение центрирования списков ul при вёрстке меню выглядит так:

HTML:

<div class="menu-holder">
<ul class="menu">
 <li><a href="#" class="first">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#" class="last">Пункт 4</a></li>
</ul>
</div>

   Зададим внешнему menu-holder контейнеру 100% ширину, назначим выравнивание по центру. Назначим ul авто ширину (width: auto) и присвоим строчный вид (display: inline), внутри контейнера ul зададим выравнивание по центру (text-align: center). Каждому дочернему элементу списка li присвоим строчный вид (display: inline). Вот и всё.

Что получилось?

CSS:

    .menu-holder{
        width: 100%;
        text-align: center;
        clear: both;
        float: none;
    }
    .menu-holder ul.menu{
        display: inline;
        width: auto;
        padding: 0;
        height: 27px;
        list-style: none;
        white-space: nowrap;
        border: 1px solid #4994D7;
    }
    .menu-holder ul.menu li{
        display: inline;
        border: none;
        border-right: none;
        line-height: 27px;
        height: 27px;
        text-align: center;
        padding: 0 5px;
        list-style: none;
        background: none;
        border-collapse: collapse;
        border-right: 1px solid #4994D7;
    }
    .menu-holder ul.menu li.last{
        border-right: none;
    }

   Примечание: чтобы вытянуть в одну строчку и не "завалить" меню, когда пунктов в нём будет больше его длинны, устанавливаем white-space: nowrap для ненумерованного списка.

   Совет: если Вы не будете делать выпадающее меню, добавьте так же в css для ненумерованного списка стиль overflow: hidden, или хотя - бы overflow-x: hidden (хоть нестандартное css правило, но широко поддерживается браузерами).

   Совет: давайте уникальное классовое имя для первого и последнего дочерних элементов li ненумерованного списка, чтобы иметь возможность изменить их стиль (в приведённом примере мы скрываем правую границу последнего пункта меню c классом last).

   Совет: высотой элементов со строчным видом (display: inline) можно управлять с помощью отступов (padding),высоты шрифта (font-size), line-height.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Комментарии   

 
-1 #1 Денис 29.01.2012 23:11
Отличное решение !)
Сам помню долго думал как в ие список выровнять, решение практически такое же )
и это гораздо лучше чем у Лебедева
Цитировать
 

Добавить комментарий


Яндекс.Метрика