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.
Потрясающе! Большое спасибо! Давно искал решение этой задачи. После подобных вещей все больше убеждаюсь, что на дивах можно реализовать все то же, что и на таблицах (или почти все?).
Я на самом деле сам прикололся, когда – будучи уверенным, что ну никак – должен был проконсультировать одного важного новичка :))
И мне стало так обидно что мне придется рекомендовать использовать таблицы или тупо задавать ширины (а там разные языки в проекте), что сел и таки нашел.
Потом долго не решался публиковать, думая, что этот велосипед уже давно изобрели, а я поленился и недогуглил.
Молодец! 😉
В очередной раз подтвердилось выражение “Все гениальное – просто!”
Вообще, я удивлён, что IE5.0-5.5 вполне довольны, несмотря на сложные смещения, разве что центрирование самого блока не работает.
Вещь вроде простая и додуматься можно, но то, что однажды опубликовано сразу откладывается в памяти как один из готовых трюков. Спасиб 😉
Ну было бы странным, если бы центрирование блока работало – с другой стороны ты не хуже меня знаешь, как именно этот блок отцентрировать для IE5.0-5.5
Не за что, я грешным делом думал что уж ты-то этот солюшн уже для себя давно нашел…
Я для себя нашёл друго солюшн: inline + line-height + padding и всё выглядит почти блочно 😉
В частности бэкграунды по ховеру, кастомные пэддинги с разных сторон, маржины и проч? Не смешите мои тапочки ))
Кстати, забавная штука получается. После того, как посмотрел твой пример, дабы в голове отложилось, я стал писать этот трюк по памяти. Смотрю результат – в IE6, IE7 и в O9 – все на своих местах, а вот FF почему-то не воспринимает “left: -50%”. Оказывается, что специально для него и был написан параметр “text-align: center” к родительскому блоку :).
Так а чего ж забавного – там много таких казалось бы лишних мелочей, которые совсем не мелочи.
Забавно то, что вот за такими мелочами кроется невидимое на первый взгляд решение.
[…] �зон нашел гениальное и простое решение проблемы с выравниванием […]
Отличная идея!
Позволил себе немного видоизменить код, в сторону минимизации, вот что вышло:
Вобщем вот: http://delka.anime.kharkov.ua/verstka/horizontal-float-center.html
Спасибо )
В он в общем не центрированный получился (где я смотрел – О, ИЕ6-7, S), и я очень не люблю хаков типа _float.
Я удалю скушанный коммент, если Вы не против )
конечно непротив)
а почему нецентрированный?
Ну на более чем 1024 сам блок влево выключен – хотя я понимаю, что это ерунда.
А можно ли как-то отцентрировать блок, чтобы идущие за ним блоки оставались на своих позициях?
Поясню:
в блоке фиксированной ширины находятся картинки расположенные одна за другой по горизонтали.
размеры картинок (ширина) могут быть разными (!)
можно ли средствами css отцентрировать одну из картинок в этом блоке?
Простите, я совершенно не понял вопроса.
Отцентрировать одну из картинок относительно чего именно?
Может быть, покажете пример (модель)?
Роман, Вы имеете в виду что-то вроде этого – многострочное центрирование плавающих элементов?
Вот именно поэтому и иногда не хочется двигаться вперёд!
Забавно то, что вот за такими мелочами кроется невидимое на первый взгляд решение.
почему-то никто не написал о том, что это решение использует overflow:hidden. Когда надо обойтись без него, появляется горизонтальный скролл. Избавитьс от него помогает метод токмакова – т.е. все тоже самое, только смещаем не влево ,а вправо.
to:vlad
Гениальное решение с позиционированием по правому боку!!! Пол дня искала способ сделать выпадающее отцентрованное меню. Если делать float:left и left: 50%… то блоки выпадающего меню не показываются за область высоты основного блока меню.