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.
August 13th, 2007 at 11:37 pm
Потрясающе! Большое спасибо! Давно искал решение этой задачи. После подобных вещей все больше убеждаюсь, что на дивах можно реализовать все то же, что и на таблицах (или почти все?).
August 13th, 2007 at 11:42 pm
Я на самом деле сам прикололся, когда – будучи уверенным, что ну никак – должен был проконсультировать одного важного новичка
)
И мне стало так обидно что мне придется рекомендовать использовать таблицы или тупо задавать ширины (а там разные языки в проекте), что сел и таки нашел.
Потом долго не решался публиковать, думая, что этот велосипед уже давно изобрели, а я поленился и недогуглил.
August 14th, 2007 at 12:35 am
Молодец!
В очередной раз подтвердилось выражение “Все гениальное – просто!”
August 14th, 2007 at 5:45 am
Вообще, я удивлён, что IE5.0-5.5 вполне довольны, несмотря на сложные смещения, разве что центрирование самого блока не работает.
Вещь вроде простая и додуматься можно, но то, что однажды опубликовано сразу откладывается в памяти как один из готовых трюков. Спасиб
August 14th, 2007 at 5:53 am
Ну было бы странным, если бы центрирование блока работало – с другой стороны ты не хуже меня знаешь, как именно этот блок отцентрировать для IE5.0-5.5
Не за что, я грешным делом думал что уж ты-то этот солюшн уже для себя давно нашел…
August 14th, 2007 at 8:46 am
Я для себя нашёл друго солюшн: inline + line-height + padding и всё выглядит почти блочно
August 14th, 2007 at 8:50 am
В частности бэкграунды по ховеру, кастомные пэддинги с разных сторон, маржины и проч? Не смешите мои тапочки ))
August 14th, 2007 at 7:58 pm
Кстати, забавная штука получается. После того, как посмотрел твой пример, дабы в голове отложилось, я стал писать этот трюк по памяти. Смотрю результат – в IE6, IE7 и в O9 – все на своих местах, а вот FF почему-то не воспринимает “left: -50%”. Оказывается, что специально для него и был написан параметр “text-align: center” к родительскому блоку
.
August 14th, 2007 at 8:50 pm
Так а чего ж забавного – там много таких казалось бы лишних мелочей, которые совсем не мелочи.
August 14th, 2007 at 9:20 pm
Забавно то, что вот за такими мелочами кроется невидимое на первый взгляд решение.
August 15th, 2007 at 1:18 am
[...] �зон нашел гениальное и простое решение проблемы с выравниванием [...]
February 21st, 2008 at 10:48 am
Отличная идея!
Позволил себе немного видоизменить код, в сторону минимизации, вот что вышло:
Вобщем вот: http://delka.anime.kharkov.ua/verstka/horizontal-float-center.html
February 21st, 2008 at 11:05 am
Спасибо )
В он в общем не центрированный получился (где я смотрел – О, ИЕ6-7, S), и я очень не люблю хаков типа _float.
Я удалю скушанный коммент, если Вы не против )
February 24th, 2008 at 12:44 pm
конечно непротив)
а почему нецентрированный?
February 24th, 2008 at 4:35 pm
Ну на более чем 1024 сам блок влево выключен – хотя я понимаю, что это ерунда.
March 13th, 2008 at 8:36 pm
А можно ли как-то отцентрировать блок, чтобы идущие за ним блоки оставались на своих позициях?
Поясню:
в блоке фиксированной ширины находятся картинки расположенные одна за другой по горизонтали.
размеры картинок (ширина) могут быть разными (!)
можно ли средствами css отцентрировать одну из картинок в этом блоке?
March 13th, 2008 at 11:07 pm
Простите, я совершенно не понял вопроса.
Отцентрировать одну из картинок относительно чего именно?
Может быть, покажете пример (модель)?
March 30th, 2008 at 5:31 am
Роман, Вы имеете в виду что-то вроде этого – многострочное центрирование плавающих элементов?
November 10th, 2008 at 9:34 am
Вот именно поэтому и иногда не хочется двигаться вперёд!
May 19th, 2010 at 7:49 pm
Забавно то, что вот за такими мелочами кроется невидимое на первый взгляд решение.