четверг, 11 февраля 2010 г.

CSS будни

Очередная бородатая проблема с нормальным размещением контента на странице с использованием CSS. На этот раз было необходимо просто центрировать по вертикали один <div> внутри другого <div>'а. Совершенно простая задача, но решается через костыли (увы-увы, мой милый цсс, ты слишком идеален для нашего грязного мира).

Подходы которые не работают (и которые не следует даже пытаться реализовать):
  • аналогично центрированию по горизонтали margin-top: auto; margin-bottom: auto;
  • margin-top: 50%; даже при определенной высоте отца-контейнера приводит к каким-то рандомным скаканиям
Делать правильно нужно так:
  1. ставим у дива-отца position: relative; и не забываем задать его высоту.
  2. ставим у дива-сына position: absolute; и top: 50%;


2 комментария:

  1. да, тоже сталкивался. div в div именно так и ровнял.

    но почему это костыли? я так понял что в этом и есть всё отличие див-верстки от табличного хардкод олдскула. тут всё динамичненько на фреймах, игра absolute-relative.

    ОтветитьУдалить
  2. В том смысле, что все работает так как и документировано, это не костыль.
    Но, согласись, решение весьма неочевидное. Отличается от центрирования по горизонтали. Да и честно говоря никаким центрированием не является. Нужно подгонять top и height чтобы было похоже что по центру. Если у меня скажем внутренний див имеет динамическую высоту, то этот метод не подойдет.

    ОтветитьУдалить