Вертикальное выравнивание в div'ах

[investor]

Даже не представляете, как мне помогли! Спасибо огромное!

[takkmoil]

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

margin-top: expression(this.w?0:(this.w=1,(parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px"));


[homm]

Что-то я не очень понял, что вы тут сбросили возвращая 0 на все вызовы после первого.

[takkmoil]

Без указания единиц измерения (px, em и т.п.) 0 трактуется как false и просто не отрабатывает. Следовательно, код, который вычисляет смещение, выполнится один раз — при загрузке страницы. Иначе он будет отрабатывать даже каждое перемещение мышки. Посмотрите демонстрацию этого эффекта на cssing, там же ссылка на внятную статью об этой проблеме.

[homm]

> Без указания единиц измерения (px, em и т.п.) 0 трактуется как false
Это понятно.

> и просто не отрабатывает.
А вот в этом вы уверены?

Если он возвращет хоть что-то (хоть 0) то значит он всетаки обрабатывается.

см. свойство runtimeStyle.

[takkmoil]

Если терминология так уж важна: отрабатывает, но в разы быстрее, ибо испольняет только проверку на true/false. Чтобы соответствовать словам «не отрабатывает», можно воспользоваться техникой с cssing, при помощи которой в «незначащем» свойстве исполняются все вычисления, а потом оно очищается.

[homm]

Кстати, если 0 трактуется как false, почему бы false не возвращать?

[takkmoil]

Ноль короче на четыре символа.

[homm]

Исскрене надеюсь, что вы не пишете реальных программ.

[takkmoil]

На начличие у вас чувства юмора я уже не надеюсь.

[homm]

Так уж получилось… Из Челябинска я.

[takkmoil]

Уральские мужики столь суровы... ;)

[bO_oblik]

«Отличаем этого метода от того, который описан в статье на cssing.org.ua заключается в том, что его можно использовать для классов, в то время как метод с cssing.org.ua подходит только для идентификаторов.»
Чего вообще значит эта строчка?

[Cake_Seller]

Если вы имели ввиду ошибку в слове "отличие", то спасибо - исправил. В остальном вроде всё понятно должно быть.

[hlomzik]

удалите эту строку
тогда пост будет нормальным

[Cake_Seller]

Чесно говоря не пойму что не так в этой строке :). Может все таки объясните?

[hlomzik]

неужели вы тоже видите гигантскую пропасть между этими двумя решениями? ведь они кардинально отличаются и просто несовместимы...
«отличие этого видео-обзора авто от обзора на *** заключается в том, что в этом ролике машина едет вперед, в то время, как на *** авто сдает назад.»

[Cake_Seller]

Я вам попробую объяснить почему я дописал этот абзац.
Дело в том, что просматривая метод решения проблемы с вертикальным выравниванием описаный на cssing.org.ua, я столкнулся с тем, что этот метод не подходил мне для конкретной поставленной задачи. Мне нужно было выровнять текст по середине в группе элементов (используя метод с cssing.org.ua мне бы пришлось каждому элементу этой группы назначать id). По этому я и выделил то, что метод описаный мною может быть применим к классам, а не только к идентификаторам.

Выражаясь вашим языком, мне нужно было именно чтобы "авто сдавало назад".

[hlomzik]

вас я прекрасно понял
вы меня — нет

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

[habratchanka]

expression не самое лучшее решение. Уж лучше использовать пару дополнительных вложенных блоков:

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>

то что с # - это для IE, просто пометила что надо отдельно это выносить
пример

[kenshin]

Когда текста станет чуть больше, чем высота, станет очень некрасиво.
Нет лучшего метода, чтобы эффективно работать нужно просто знать все =)

[habratchanka]

так высоту тоже можно изменить, все от реальной задачи зависит.

[kenshin]

Конечно можно изменить, но ее нужно задавать обязательно. Вот я и говорю, что контент может превысить высоту блока и будет некрасиво. Я с этим периодически сталкиваюсь.
Метод хороший и полезный, но я лично ради чистоты кода применяю экспрешн все ж =)

[habratchanka]

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

[kenshin]

У меня тем не менее такое было не раз, это часто связано с навигацией, некоторые пункты которой могут быть 1 строкой, или 2мя или 3мя. Или дизайном разного рода виджетов, в которые потом может вставиться невесть что.
Давайте не будем заморачиваться на конкретике, я просто хотел сказать что нельзя говорить о превосходстве какого-то из методов, каждый из них покрывает свой круг подзадач.

[M4rkK1d]

Большое спасибо за ссылку на валидное решение! :)
Извини, не могу плюс поставить :(

[script]

у меня проще: родительский этемент {text-align: center;}
P.S это меня глючит или серьезно хабрабордюрчики у комментов появились?)

[Cake_Seller]

вы видимо не поняли... Речь идёт о вертикальном выравнивании, а не о горизонтальном :)

[takkmoil]

Хабрабордюрчики появляются у комментов, которые были написаны после предыдущего просмотра топика.

[MAXH0]

Большое спасибо! Хорошая статья

[Cake_Seller]

Пожалуйста. Очень приятно слышать положительные отзывы. Надеюсь, что ещё опубликую полезную информацию.