bunin Oct 7 2009 at 02:08

Вертикальное выравнивание блоков в CSS

3 min

2.4K

Comments 9

fenrillium Oct 7 2009 at 04:16

Напрасно вы не проверили Ie7 и Ie8 (скриншот с Ie8), по бокам, разумеется, белые дыры. Зато под Ie6 работает, уже хорошо)).

ie8

Enlightened Oct 7 2009 at 08:16

8-й понимает display: table-cell.
Код для IE6 нужно просто отфильтровать в Conditional Comments

dohlik Oct 7 2009 at 09:07

В Firefox v3.5 на указанном примере появляется вертикальная прокрутка. В ИЕ6 работает, но три оберточных дива это многовато, как мне кажется.

bunin Oct 7 2009 at 11:48

Заменил if IE, на if lte IE 7 теперь везде работает — rageteam.org/portfolio/valign/

-1

norfild Oct 7 2009 at 15:30

Не хочу критиковать (возможно Вы сами дошли к этому решению) но способ почти аналогичен прижатию footera к низу страницы, только в роли контейнера выступает body!

Живой пример: www.webmolot.com/recipe/footer/

Все что необходимо сделать прописать (вместо min-height:100%) min-height:50%!
Но есть также много прекрасных решений с использованием только двух контейнеров!

P.S. Рекомендую еще немного погуглить

bunin Oct 7 2009 at 19:52

Простите, а причем здесь это? Как вы с помощью min-height:50% отцентрируете по вертикали блок неизвестной высоты?

Для тех кто не понял, у блока с текстом не указана высота, она зависит от объема текста!

norfild Oct 8 2009 at 13:22

Зато у Вас в общего блока прописана фиксированная высота (500px) а не динамическая (100%)

UFO just landed and posted this here

bunin Oct 7 2009 at 19:55

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

Show the best of all time