Создание центрированной горизонтальной навигации

Центрировать блоковые элементы просто, достаточно определить ширину (width) и задать margin: 0 auto;, но что если значение этой фиксированной ширины неизвестно? Можно воспользоваться text–align:center;, однако данное решение не работает с блоковыми элементами…оно годится только для элементов текстового уровня.

Следует избегать определения явной ширины и высоты, в противном случае документ становится намного менее гибким, теряет в расширяемости и способности к обновлению. … Предположим, что в навигационном меню находятся четыре элемента – с целью воздействовать на эти элементы установим общую ширину навигационного меню, а затем центрируем меню с помощью margin: 0 auto;. Добавление пятого элемента вызовет увеличение ширины, т. е. надо будет вносить изменения и в СSS. Такой подход далек от идеального, усугубляющийся при работе сайта на CMS (клиент может добавлять страницы, но, возможно, не может редактировать СSS).

В любом случае, существует способ создания центрированной горизонтальной навигации без знания явной ширины, и не прибегая к СSS. Способ этот к тому же еще чрезвычайно прост.

HTML

  <ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
  </ul>

Довольно стандартный неупорядоченный список элементов меню. СSS. Я выделил части, выполняющие большую часть работы.

CSS

 #nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

Мною был создан список навигации, которому я задал верхние и нижние границы (исключительно для того чтобы подчеркнуть центрирование текста). Вместо того чтобы элементы списка <li> выравнивать по левой стороне (float:left;) , я задал им display: inline;, то есть они больше не будут занимать 100% доступной ширины и опрятно расположатся друг напротив друга.

Далее используем (часто игнорируемое) объявление display: inline-block; чтобы убедиться, что ссылки ведут себя как блоки. Также я увеличил их зону клика, добавив padding: 10px;.

Можно было бы применить inline-block к элементам списка <li>. Однако в IE6-7 значение inline-block работает только с inline элементами. display:inline–block; не будет работать с блочными элементами.

Ссылка на демо. Воспользуйтесь Firebug или же похожей программой, чтобы добавить другие элементы списка «на лету», и посмотрите, как безупречно они центрируются в списке. Я тестировал демо в браузерах IE7-8, где все отображалось отлично. На IE-6 ее я не проверял, но, полагаю, и там не возникнет проблем.

Дополнение.

Я сделал СSS версию выпадающего меню этой статьи. Строчка top: 100%; позволит работать меню в IE7, но как бы ухудшает его работу в других браузерах. Оставить или убрать ее, решать вам.