понедельник, 3 октября 2011 г.

Выравниваем меню по центру

Часто возникает необходимость выровнять меню, представляющее собой список ul li, горизонтально по центру страницы. Ширина меню нам неизвестна, она может изменяться в зависимости от страницы, поэтому задать жесткие отступы - не вариант.

Я поступаю следующим образом.
Заворачиваем наше меню в два div'а.

<div id="menu-wrap">
      <div id="menu">
            <ul>
                  <li></li>
                  <li></li>
                  ...
            </ul>
      </div>
</div>

Верхнему div'у задаем фиксированную ширину. Это максимально возможная ширина нашего меню.

Второму div'у задаем margin-left:50%, а самому списку ul margin-left:-50%.

Для кроссбраузерности обязательно всем трем блокам задаем position:relative, а второму div'у и списку ul float:left

Комментариев нет:

Отправить комментарий