Комментарии 31
Даже не представляете, как мне помогли! Спасибо огромное!
И, в целях экономии процессорного времени пользователя, не забываем expression сбрасывать (конечно, если размеры элемента или его содержимое не будут меняться динамически):
margin-top: expression(this.w?0:(this.w=1,(parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px"));
Что-то я не очень понял, что вы тут сбросили возвращая 0 на все вызовы после первого.
Без указания единиц измерения (px, em и т.п.) 0 трактуется как false и просто не отрабатывает. Следовательно, код, который вычисляет смещение, выполнится один раз — при загрузке страницы. Иначе он будет отрабатывать даже каждое перемещение мышки. Посмотрите демонстрацию этого эффекта на cssing, там же ссылка на внятную статью об этой проблеме.
> Без указания единиц измерения (px, em и т.п.) 0 трактуется как false
Это понятно.
> и просто не отрабатывает.
А вот в этом вы уверены?
Если он возвращет хоть что-то (хоть 0) то значит он всетаки обрабатывается.
см. свойство runtimeStyle.
Это понятно.
> и просто не отрабатывает.
А вот в этом вы уверены?
Если он возвращет хоть что-то (хоть 0) то значит он всетаки обрабатывается.
см. свойство runtimeStyle.
Кстати, если 0 трактуется как false, почему бы false не возвращать?
«Отличаем этого метода от того, который описан в статье на cssing.org.ua заключается в том, что его можно использовать для классов, в то время как метод с cssing.org.ua подходит только для идентификаторов.»
Чего вообще значит эта строчка?
Чего вообще значит эта строчка?
Если вы имели ввиду ошибку в слове "отличие", то спасибо - исправил. В остальном вроде всё понятно должно быть.
удалите эту строку
тогда пост будет нормальным
тогда пост будет нормальным
Чесно говоря не пойму что не так в этой строке :). Может все таки объясните?
неужели вы тоже видите гигантскую пропасть между этими двумя решениями? ведь они кардинально отличаются и просто несовместимы...
«отличие этого видео-обзора авто от обзора на *** заключается в том, что в этом ролике машина едет вперед, в то время, как на *** авто сдает назад.»
«отличие этого видео-обзора авто от обзора на *** заключается в том, что в этом ролике машина едет вперед, в то время, как на *** авто сдает назад.»
Я вам попробую объяснить почему я дописал этот абзац.
Дело в том, что просматривая метод решения проблемы с вертикальным выравниванием описаный на cssing.org.ua, я столкнулся с тем, что этот метод не подходил мне для конкретной поставленной задачи. Мне нужно было выровнять текст по середине в группе элементов (используя метод с cssing.org.ua мне бы пришлось каждому элементу этой группы назначать id). По этому я и выделил то, что метод описаный мною может быть применим к классам, а не только к идентификаторам.
Выражаясь вашим языком, мне нужно было именно чтобы "авто сдавало назад".
Дело в том, что просматривая метод решения проблемы с вертикальным выравниванием описаный на cssing.org.ua, я столкнулся с тем, что этот метод не подходил мне для конкретной поставленной задачи. Мне нужно было выровнять текст по середине в группе элементов (используя метод с cssing.org.ua мне бы пришлось каждому элементу этой группы назначать id). По этому я и выделил то, что метод описаный мною может быть применим к классам, а не только к идентификаторам.
Выражаясь вашим языком, мне нужно было именно чтобы "авто сдавало назад".
expression не самое лучшее решение. Уж лучше использовать пару дополнительных вложенных блоков:
то что с # - это для IE, просто пометила что надо отдельно это выносить
пример
<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, просто пометила что надо отдельно это выносить
пример
Когда текста станет чуть больше, чем высота, станет очень некрасиво.
Нет лучшего метода, чтобы эффективно работать нужно просто знать все =)
Нет лучшего метода, чтобы эффективно работать нужно просто знать все =)
так высоту тоже можно изменить, все от реальной задачи зависит.
Конечно можно изменить, но ее нужно задавать обязательно. Вот я и говорю, что контент может превысить высоту блока и будет некрасиво. Я с этим периодически сталкиваюсь.
Метод хороший и полезный, но я лично ради чистоты кода применяю экспрешн все ж =)
Метод хороший и полезный, но я лично ради чистоты кода применяю экспрешн все ж =)
выравнивание по вертикали обычно не ставиться задачей выравнить текст, которого может стать больше чем высота блока. Я даже примеров таких не могу вам привести..
У меня тем не менее такое было не раз, это часто связано с навигацией, некоторые пункты которой могут быть 1 строкой, или 2мя или 3мя. Или дизайном разного рода виджетов, в которые потом может вставиться невесть что.
Давайте не будем заморачиваться на конкретике, я просто хотел сказать что нельзя говорить о превосходстве какого-то из методов, каждый из них покрывает свой круг подзадач.
Давайте не будем заморачиваться на конкретике, я просто хотел сказать что нельзя говорить о превосходстве какого-то из методов, каждый из них покрывает свой круг подзадач.
Большое спасибо за ссылку на валидное решение! :)
Извини, не могу плюс поставить :(
Извини, не могу плюс поставить :(
у меня проще: родительский этемент {text-align: center;}
P.S это меня глючит или серьезно хабрабордюрчики у комментов появились?)
P.S это меня глючит или серьезно хабрабордюрчики у комментов появились?)
Большое спасибо! Хорошая статья
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Вертикальное выравнивание в div'ах