Comments 59
Отлично!
Правильно ли я понял, что весь бенифис метода — использование line-height и inline-block?
UFO just landed and posted this here
UFO just landed and posted this here
Заменил тег.
UFO just landed and posted this here
Вы можете пользоваться любым другим семантичным кросбраузерным способом вертикального выравнивания. На сколько мне известно, их ровно ноль.
Извините, но у Вас не совсем правильное понимание слова Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.
В верстке использование оберточных блоков следует избегать по возможности, но это не обязательное правило: если Вы дадите оберточному блоку класс из которого будет понятно что этот блок делает, что именно он оборачивает — семантика практически не пострадает.
В верстке использование оберточных блоков следует избегать по возможности, но это не обязательное правило: если Вы дадите оберточному блоку класс из которого будет понятно что этот блок делает, что именно он оборачивает — семантика практически не пострадает.
UFO just landed and posted this here
и не говори, его «пока заметная доля» каких-то жалких 25%. Сдается мне, счастье быстро не наступит.
Так а я о чем все время говорю… я вообще оптимист по жизни, но нужно же быть хоть сколько-то реалистами: IE6 жив пока жива на Земле глупость, а это очень и очень долго и если честно я вижу в этом и положительные стороны: именно этот дибильный IE6 многих из нас заставляет совершенствовать свои знания быстрее чем мы это можем делать :)
ну я html-nazi, но позволите ли мне воздержаться от криков о якобы кривости приведённого автором варианта, и просто избежать подобных конструкций в собственном коде?
А автору всё равно респект ибо способ работает хорошо, стабильно, да и наблюдения насчёт поведения ИЕ интересны.
А автору всё равно респект ибо способ работает хорошо, стабильно, да и наблюдения насчёт поведения ИЕ интересны.
А что если высота контейнера неизвестна (определяется другим контентом)? Есть ли способ?
Есть. Через display:table-cell; для нормальных браузеров и небольной expression для IE. Всё это есть в комментарии выше. (Ладно, не удержусь и дам ссылку: cssing.org.ua/2007/04/26/another-css-valign-method/)
Стало грустно после «Должна быть известна начальная высота родительского блока;»
А так неплохо. О line-height мало кто помнит. Кстати, для IE inline-block элементы проще верстать span'ами, и к черту семантику.
А так неплохо. О line-height мало кто помнит. Кстати, для IE inline-block элементы проще верстать span'ами, и к черту семантику.
ну здесь помоему фигня больше не в семантике, а в непредсказуемости поведения вложенных блоков, нужно будет потестить на приближенных к реальности примерах: вот у меня есть версия что проблемы начнуться, когда мы внутрь .block поместим дивы с float: left; и float: right;
Если пройдет испытание временем — то такой метод мне кажется неплохим и span'ы его сильно не испортят
Если пройдет испытание временем — то такой метод мне кажется неплохим и span'ы его сильно не испортят
тогда уж лучше ins — в него можно оборачивать блочные элементы, и сам он строчный при этом. и с бааальшой натяжкой можно будет сказать, что семантика соблюдена) — элемент по названию предназначен для вставки чего-либо (INSert), ну так мы и добавляем
Супер, спасибо!
Буквально на днях столкнулся с такой проблемой, а вот уже и решение =)
Буквально на днях столкнулся с такой проблемой, а вот уже и решение =)
Баян
Кстати говоря, «Баян» уже давно сам стал баяном.
По-мойму все давно знают о таком способе.
не все, я не знал… почему-то каждый наталкиваясь на знакомый метод считает нужным прокомментировать это… при том что давно всем известно, что действительно новые изобретения случаются крайне редко, тем более в нашей стране, все равно все так или иначе заимствованно из-за бугра, а вот то что многие статьи почти полностью копипастятся внутри самого хабра по 5 раз мало кто замечает…
Я совсем недавно изучал вопрос и вот одна из возможных ссылок: haslayout.net/css-tuts/Vertical-Centering
Изобретения не вышло.
Изобретения не вышло.
white-space: nowrap
еще один источник www.cssplay.co.uk/ie/valign.html
Красивое решение. Жаль только, что с DOCTYPE Transitional не работает.
ссылки на Стью Никольса и прочих, можно хоть целый день кидать, а тут вот, Наш человек решил задачу по-новому, ну, разве это не здорово? =)
Все бы хорошо, если бы не практически полная бесполезность примера: ну где вы найдете блоки с фиксированной высотой, да еще и в пикселях?? (хотя line-height можно и в em задать конечно)
Думаю как клёво что придумали.
Смотрю в код, а там марин-топ 100пх, лайн-хейгт 200пх и в transitional не работет ;)
Смотрю в код, а там марин-топ 100пх, лайн-хейгт 200пх и в transitional не работет ;)
это, конечно, валидно и лаконично, но старая занудная таблица потребует меньше итогового кода…
Замечательно! Осталось научиться писать ногой и ходить на руках.
Остроумное решение, но как по мне: слишком много «хаков» и усложнений, использовать врятли буду.
Попробовал сейчас этот способ, другие по разным причинам не нравились. Вроде всё работает как надо, с двумя оговорками: во-первых, контейнеру пришлось указать не только
Причина в обоих случаях, подозреваю, одна и та же: у меня вложенные (центрируемые по вертикали)
line-height, но и такой же height оставить, иначе он схлопывается по высоте содержимого; во-вторых, в старых IE всё заработало с p-блоками и общими стилями, без специальных выкрутасов.Причина в обоих случаях, подозреваю, одна и та же: у меня вложенные (центрируемые по вертикали)
p-блоки зафлоачены.UFO just landed and posted this here
Sign up to leave a comment.
Способ вертикального выравнивания блока с помощью настоящего vertical-align