Как отцентрировать горизонтальный “плавающий” список

20 комментариев

Алекс Маузон нашел гениальное и простое решение проблемы с выравниванием по центру навигации, являющей собой горизонтальный список, без применения таблиц. За это ему положенный респект!

Идея заключается во вложении контейнера <ul> в 2 дополнительных блока:

для первого из них задается основная ширина;
для второго задается положительный 50%-ный отступ слева;
для самого блока списка задается отрицательный 50%-ный отступ слева, дабы “аннулировать” смещение от родительского блока;
для 2-го и 3-го блоков указывается свойство “плавающего” (float: left) и для всех 3-х блоков – относительное позиционирование (position: relative).

Лучше посмотреть готовый пример: горизонтальный “плавающий” список по центру.

Данная техника проверена и одинаково работает во всех популярных браузерах: IE 6, IE 7, Opera 9, FireFox 2, Netscape 8, Safari 3.

Берем на вооружение!

P.S. Кстати, замечаю, что еще несколько вещей, используемых мною на практике, достигаются как раз за счет противоположных отступов для нескольких вложенных друг в друга блоков.

* * *

Доступные цены, уютные и чистые комнаты – вот что характеризует гостиницы Ярославля от компании «ОТЕЛЬ 76». Здесь вы сможете выбрать любой из пятнадцати предлагаемых уровней комфортности гостиницы.

Комментарии (20)

uggallery
15 августа 2007 г. в 17:47
>еще несколько вещей, используемых мною на практике, достигаются как раз за счет противоположных отступов для нескольких вложенных друг в друга блоков

Интересно что это за вещи. Можно кратко?
Dimox
15 августа 2007 г. в 18:07
Да, конечно можно. По крайней мере, 2 примера набирается:

1) Центрирование блока с известной шириной и высотой, содержащего небольшое количество информации, горизонтально и вертикально на странице. Пример. Правда, здесь оба противоположных отступа задаются для одного блока.

2) Трехколоночный макет, в котором для контента указывается положительный отступ, а для левой и правой колонки – отрицательный, при этом все три блока “плавающие”. Как раз планирую написать об этом заметку.
Zigzag
29 августа 2007 г. в 18:46
простите, а автополя уже отменили?
Dimox
30 августа 2007 г. в 01:52
Zigzag, автополя не помогают, потому что сами ссылки или элементы списка “плавающие” и неизвестна их точная ширина.
Zigzag
7 сентября 2007 г. в 22:48
упс, сорри, действительно пропустил момент с неизвестной шириной.. звиняйте.

SlaviO

22 ноября 2007 г. в 23:15

А так не проще?
html:

<div id="menu">
    <ul>
      <li>текст</li>
      <li>текст</li>
      <li>текст</li>
      <li>текст</li>
      <li>текст</li>
    </ul>
</div>

CSS:

#menu {
	text-align:center;
}

#menu ul {
	list-style:none;

}
#menu ul li {
	position: relative;
	display: inline;
	margin-left:10px;
	margin-right:10px;
}

Dimox
23 ноября 2007 г. в 00:41
Проще, но часто бывает необходимо, чтобы <li> был блоком, а не строчным элементом.

XAMelleOH

16 сентября 2008 г. в 18:35

А почему не так? По-моему намного проще. Ссылочки хорошо чувствуют себя блоками, если не хватает, можно еще спаны в них блочные вставить:

ul{
	list-style-type:none;
	list-style-image:none;
	text-align:center;
	border: solid 1px red;
}

ul li{
	display: -moz-inline-box;
	margin-right:20px;
	background: blue;
	padding: 5px;
}

ul li{
	display:inline-block;
}

* html .footer ul li{ display:inline;}
*+html .footer ul li{ display:inline;}

ul li a{
	color:#000;
	font-size:12px;
	display: block;
	padding: 20px;
	background: red;
}

Dimox
17 сентября 2008 г. в 11:16
XAMelleOH, спасибо! Да, действительно так проще. Сейчас проверил. Вроде бы во всех браузерах работает, как надо. У меня, кстати, на компьютере уже давно лежит подобный пример на английском языке, но там как-то все запутанно, поэтому я так и не стал в нем разбираться.
XAMelleOH
28 октября 2008 г. в 18:26
А еще жалко что с помощью этого трюка нельзя сделать выпадающее меню… дизайнеры так часто этого хотят… :(

P.S. Нельзя из-за overflow: hidden; у самого внешнего блока.
poizon
7 мая 2009 г. в 09:33
а вот такой способ кто-нть знает?
1. Sync
  11 августа 2009 г. в 20:36 / ответ на коммент poizon
  Ваш способ такой же как и тот что предложен автором, отличие только в том куда флотить вправо или влево. Вы скажете что избавились от одного блока, но это не так. Так как в случае о котором говорит автор, верхнему блоку задается фиксированная ширина и вся менюшка не падает при уменьшении окна, если его убрать то она будет себя вести так же как в вашем примере
CAESAR
14 июля 2009 г. в 11:02
Спасибо! А то я начал делать нумерацию страниц по li и вообще все нервы вымотал с центрированием дивов… весь инет перерыл, спасибо вам фух :)
divone
15 августа 2009 г. в 01:35
Я думал я идиот, оказалось тут хитрость) все получилось, спасибо большое! Сложно было совместить центрирование списка и jquery.lavalamp )
Ольга
11 марта 2010 г. в 18:55
А у меня почему то при использовании такого центрирования появляется горизонтальная полоса прокрутки(во всех браузерах), в чем может быть дело?
ilyas
20 августа 2011 г. в 11:14
Dimox а есть ли смысл становиться (самообучаться) хтмл верстке? ведь сейчас и верстальщиков тоже развелось?
1. Dimox
  21 августа 2011 г. в 14:43 / ответ на коммент ilyas
  Если душа к этому лежит, и есть желание, то да.
ilyas
22 августа 2011 г. в 09:17
Dimox а что восстребованнее я немного верстать умею но мне как-то с трудом дается вот хочется попробовать себя в веб-дизайне как вы оценивате эту профессию, учиться учился на строителя по специальности работал но толку не мое это да и сейчас по стройке работы мало,
1. Dimox
  22 августа 2011 г. в 11:10 / ответ на коммент ilyas
  Что веб-дизайнеры, что веб-верстальщики востребованы. Пробуйте и занимайтесь тем, что больше нравится.
vanson
10 июня 2012 г. в 02:09
Помогло, спасибо. Лови тычок :)

Как отцентрировать горизонтальный “плавающий” список

Смотрите также

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

Верстка красивых тегов для сайта + бонус

Зеленый свет CSS-свойствам при верстке под IE8 и выше

Пример верстки поисковой формы для сайта на HTML5 и CSS3

Комментарии (20)

Ваш комментарий