Some time ago I used to think this problem can’t be correctly resolved without tables.
Imagine, you have a list of elements (each element’s width is unknown – read: variable) that should be blocks (for example you have to add background on hover or make any other helpful things you can’t handle with inline elements).
This list should be centered for some reason (designer’s fancy, do you know any other reason?)…

I thought it is 1 of short list problems that can’t be correctly resolved with no tables. But, huh, solution is simple enough.

Example of centered floating list

There are 2 examples: with UNORDERED LIST (UL/LI) and without it (just a few A tags). Dotted border is helpful tip to understand the idea.
Works in IE6,IE7, O9, FF2, N8, S3 – more tests are welcome.

Enjoy.

 

22 Responses to How to center floating list (navigation)

  1. Dimox says:

    Потрясающе! Большое спасибо! Давно искал решение этой задачи. После подобных вещей все больше убеждаюсь, что на дивах можно реализовать все то же, что и на таблицах (или почти все?).

  2. Alex says:

    Я на самом деле сам прикололся, когда – будучи уверенным, что ну никак – должен был проконсультировать одного важного новичка :))
    И мне стало так обидно что мне придется рекомендовать использовать таблицы или тупо задавать ширины (а там разные языки в проекте), что сел и таки нашел.

    Потом долго не решался публиковать, думая, что этот велосипед уже давно изобрели, а я поленился и недогуглил.

  3. Dimox says:

    Молодец! 😉
    В очередной раз подтвердилось выражение “Все гениальное – просто!”

  4. pepelsbey says:

    Вообще, я удивлён, что IE5.0-5.5 вполне довольны, несмотря на сложные смещения, разве что центрирование самого блока не работает.

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

  5. Alex says:

    Ну было бы странным, если бы центрирование блока работало – с другой стороны ты не хуже меня знаешь, как именно этот блок отцентрировать для IE5.0-5.5

    Не за что, я грешным делом думал что уж ты-то этот солюшн уже для себя давно нашел…

  6. pepelsbey says:

    Я для себя нашёл друго солюшн: inline + line-height + padding и всё выглядит почти блочно 😉

  7. Alex says:

    В частности бэкграунды по ховеру, кастомные пэддинги с разных сторон, маржины и проч? Не смешите мои тапочки ))

  8. Dimox says:

    Кстати, забавная штука получается. После того, как посмотрел твой пример, дабы в голове отложилось, я стал писать этот трюк по памяти. Смотрю результат – в IE6, IE7 и в O9 – все на своих местах, а вот FF почему-то не воспринимает “left: -50%”. Оказывается, что специально для него и был написан параметр “text-align: center” к родительскому блоку :).

  9. Alex says:

    Так а чего ж забавного – там много таких казалось бы лишних мелочей, которые совсем не мелочи.

  10. Dimox says:

    Забавно то, что вот за такими мелочами кроется невидимое на первый взгляд решение.

  11. Как отцентрировать горизонтальный “плавающий” список « Свобода слова вебмастерского says:

    […] �зон нашел гениальное и простое решение проблемы с выравниванием […]

  12. Del'ka says:

    Отличная идея!

    Позволил себе немного видоизменить код, в сторону минимизации, вот что вышло:

    Вобщем вот: http://delka.anime.kharkov.ua/verstka/horizontal-float-center.html

  13. Alex says:

    Спасибо )

    В он в общем не центрированный получился (где я смотрел – О, ИЕ6-7, S), и я очень не люблю хаков типа _float.
    Я удалю скушанный коммент, если Вы не против )

  14. Del'ka says:

    конечно непротив)

    а почему нецентрированный?

  15. Alex says:

    Ну на более чем 1024 сам блок влево выключен – хотя я понимаю, что это ерунда.

  16. Роман says:

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

    можно ли средствами css отцентрировать одну из картинок в этом блоке?

  17. Alex says:

    Простите, я совершенно не понял вопроса.
    Отцентрировать одну из картинок относительно чего именно?
    Может быть, покажете пример (модель)?

  18. Vladimir says:

    Роман, Вы имеете в виду что-то вроде этого – многострочное центрирование плавающих элементов?

  19. Kpi says:

    Вот именно поэтому и иногда не хочется двигаться вперёд!

  20. Bruce says:

    Забавно то, что вот за такими мелочами кроется невидимое на первый взгляд решение.

  21. vlad says:

    почему-то никто не написал о том, что это решение использует overflow:hidden. Когда надо обойтись без него, появляется горизонтальный скролл. Избавитьс от него помогает метод токмакова – т.е. все тоже самое, только смещаем не влево ,а вправо.

  22. Nataly says:

    to:vlad
    Гениальное решение с позиционированием по правому боку!!! Пол дня искала способ сделать выпадающее отцентрованное меню. Если делать float:left и left: 50%… то блоки выпадающего меню не показываются за область высоты основного блока меню.