Войти в систему

Home
    - Создать дневник
    - Написать в дневник
       - Подробный режим

LJ.Rossia.org
    - Новости сайта
    - Общие настройки
    - Sitemap
    - Оплата
    - ljr-fif

Редактировать...
    - Настройки
    - Список друзей
    - Дневник
    - Картинки
    - Пароль
    - Вид дневника

Сообщества

Настроить S2

Помощь
    - Забыли пароль?
    - FAQ
    - Тех. поддержка



Пишет Eversmilin doomsta ([info]shayd13)
@ 2006-12-15 19:31:00


Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Век живи - век дурак II
Я тут все изобретаю велосипед, как бы в дивах содержимое по вертикали центровать. Ну да, display: table-cell, но - кто бы мог подумать?! - ишак этого не понимает, а хаков хотелось бы избежать.

Генеральная идея была такая: контент сдвинуть вниз на 50% высоты контейнера, а потом вверх на 50% высоты контента. Тогда середина контента должна совпасть с серединой ящика.


Сначала я попробовал сдвигать контент с помощю поля. Но опаньки! Процентное значение padding/margin задается относительно ширины контейнера даже для вертикальных полей. Просрано!




Тогда бобробуем двигать с помощью позиционирования. Возьмем такую вот конструкцию:


<div class="main">
<div class="spacer"></div>
<div class="wrap">
<div class="content">
СЛАВА СОТОНЕ
</div>
</div>
</div>



И присобачим к ней такой вот цсс:

.main {
background: blue;
height: 500px;
width: 500px;
}

.spacer {
height: 50%;
background: brown;
}

.wrap {
background: yellow;
}

.content {
position: relative;
top: -50%;
}




Я рассчитывал, что пустой див "spacer" отожмет контент вниз на 50% общего контейнера "main", а потом контент уедет вверх на половину высоты своего контейнера "wrap" (который по высоте контенту и равен).

Каким образом пузи-идея ловко обосралась, можно посмотреть здесь. Адекватные браузеры просто отказываются смещать див с контентом, а ишак еще и вешает его наверх, как будто контейнер не "wrap", а внешний "main".

Теоретически вроде бы все верно и должно работать. Что мешает изымать див контента из нормального потока - непонятно. Я пробовал играться с разными сочетаниями position: relative и position: absolute на разных дивах, но нихрена не добился. В инете пошарился - методов центровки немало, но они то не кроссбраузерные, то ацко громоздкие, то кошерны только в частных случаях (например только для строчных элементов, или только для целой страницы в качестве контейнера, или для контейнера известного размера, и т.д.). Короче, не удалось ничего рабочего найти.

Ну как-то же выкручиваются люди?

Памаги-и-и-и-и-т-и-и-и-и-и!


PS а как чотко прижимать к низу страницы футер (сохраняя возможность растяжения страницы по вертикали) я таки придумал, хоть и мозгами поцтрадал. Через отрицательные поля, как и с многоколоночной версткой. Дж! Изобретать велосипед немодно, зато понимание в мозги вбивается насмерть.



(Добавить комментарий)


[info]_zee_@lj
2006-12-16 00:32 (ссылка)
http://ai.technocore.ru/temp/vertical-align.html

(Ответить)


[info]_zee_@lj
2006-12-16 00:33 (ссылка)
проверил под ие7 и фф, вроде работает, больше ничего нет.

(Ответить)


[info]_zee_@lj
2006-12-16 00:36 (ссылка)
или там контент неизвестного заранее размера?

(Ответить) (Ветвь дискуссии)


[info]shayd13@lj
2006-12-17 11:12 (ссылка)
Ну конечно неизвестного. Я же написал - хочетсоу нарыть метод,
пригодный в _общем_ случае.

поле -0.6ем - это да, кошерно, можно употребл%ть, если центровать надо
строковый элемент. Но опять же - если там две строчки, то уже бдыщ.

(Ответить) (Уровень выше)