Логин (e-mail) Пароль

Беcтабличное вертикальное выравнивание

4 февраля 2010 г.

Намедни во френдфидике, в группе «Учимся верстать» материализовался вопрос, как вертикально выровнять блок произвольной высоты по центру окна браузера без использования таблицы в разметке. Решение не ново; возможно, вам пригодится.

HTML:

<div id="wrapper">
	<div id="middle">
		<p>Lorem ipsum...</p>
	</div>
</div>

CSS:


* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {display: table;}
#wrapper {display: table-cell; vertical-align: middle;}
#middle {color: white; background: gray;}

Посмотрите, все просто. Во всех современных браузерах конструкция работоспособна; IE 6,7 к названным не относятся.

из раздела Верстка сайтов  
]]>twitter.com Google Buzz google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru]]>

4 комментария

RSS
  1. > IE 6,7 к названным не относятся.

    Чего и следовало ожидать

  2. Какое ж оно бестабличное, если используется display: table-cell?

  3. Вот посмотрите здесь ( http://css-html.org/17-vertical-align-in-divs/ ) проблема решена и для IE 6,7

  4. @Green Тогда применительно к данному случаю при использовании expression необходимо определять высоту контейнера, т.е. #wrapper { height:100% ... }

Ваш комментарий

Аноним
Комментатор

Чтобы стать комментатором укажите свой e-mail, придумайте пароль, напишите комментарий. После активации (см. свой почтовый ящик) можно заполнить данными (сайт, о себе, контактная информация) персональную страницу.

Загрузите картинки