Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 59
Отлично!
Правильно ли я понял, что весь бенифис метода — использование line-height и inline-block?
Заменил тег.
Вы можете пользоваться любым другим семантичным кросбраузерным способом вертикального выравнивания. На сколько мне известно, их ровно ноль.
Извините, но у Вас не совсем правильное понимание слова Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.
В верстке использование оберточных блоков следует избегать по возможности, но это не обязательное правило: если Вы дадите оберточному блоку класс из которого будет понятно что этот блок делает, что именно он оборачивает — семантика практически не пострадает.
В верстке использование оберточных блоков следует избегать по возможности, но это не обязательное правило: если Вы дадите оберточному блоку класс из которого будет понятно что этот блок делает, что именно он оборачивает — семантика практически не пострадает.
и не говори, его «пока заметная доля» каких-то жалких 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-блоки зафлоачены.Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Способ вертикального выравнивания блока с помощью настоящего vertical-align