Подписка
Email
Fb
RSS
Twitter
Email

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

Приветствую вас, уважаемые читатели блога DenWeb.Ru. В прошлой статье я писал о выравнивании страницы по центру. Там речь шла о том, как выравнивать блоки по горизонтали. Сегодня же я хочу рассказать о вертикальном выравнивании блока div. Рассмотрим два случая. В первом блок у нас имеет фиксированную ширину, а во втором он резиновый.

Вертикальное выравнивание блока div с фиксированными размерами.

Если блок имеет фиксированную ширину, то здесь все просто. Используем следующий код:

HTML:

<html>
  <body>
    <div id="centered">Здесь будет содержимое блока </div>
  </body>
</html>

CSS:

html {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
#centered {
    background:#CCC;
    width:600px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-200px;
    margin-left:-300px;
}

Посмотреть пример

Сначала мы обнуляем внешние и внутренние отступы и фиксируем высоту и ширину body и html. Затем для наглядности даем фон блоку centered, так же определяем ему ширину и высоту (600px на 400px). Задаем position:absolute и сдвигаем левый верхний угол блока на 50% вниз и на 50% вправо. Далее важное свойство — отрицательный отступ сверху, равный половине высоты блока и слева, равный половине ширины блока.

Вертикальное выравнивание резинового блока div.

HTML :

<html>
  <head>
    <!--[if gte IE 6]>
    <style>
    #container {
        margin-top: expression( this . parentNode . offsetHeight > this . offsetHeight ?(( this . parentNode . offsetHeight-this . offsetHeight ) / 2 + "px" ) : "0" );
    }
    </style>
    <![endif]-->
  </head>
  <body>
    <div id="centered">Здесь будет содержимое блока
    </div>
  </body>
</html>
  

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

html {
    display: table;
}

body {
    display: table-cell;
    vertical-align: middle;
}
#centered {
    background:#CCC;
}
  

Посмотреть пример

Отдельно для html добавляем display: table; определяющее, что элемент является блочной таблицей. Далее прописываем для body свойства, указывающие что элемент представляет собой ячейку таблицы с вертикальным выравниванием по-середине.

Но как обычно проблемы возникают с браузером IE, который не умеет работать со свойством display: table-cell . Именно для него используются условные комментарии  <!--[if gte IE 6]>...<![endif]-->, благодаря чему для IE версии 6 и позднее задаются свои стили для блока #centered.

Вы можете оставить комментарий.

7 комментариев к записи “Вертикальное выравнивание блока div”

  1. Звёздный воин:

    Спасибо большое за статью! Теперь выровнял по вертикали в IE. Сначала не получилось, так как в коде ошибка или так и задумано :) <!--[if gte IE 6]>04    <style>05   вместо  #container написать                                    #centered 

  2. neptun:

    Подскажите при просмотре первого примера выводятся кракозябры. В коде посмотрел стоит <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> но ни один браузер  (firefox, opera, Google Chrome) не отобразил нормально кодировку. После принудительно выставления utf-8 все нормально, в браузерах все по умолчанию (авто определение). Подскажите почему так происходит.

  3. Иван:

    скажите пожалуйста,как сделать,чтобы информация отображалась только в окошке по середине,например как на www.spaces.ru ?

  4. Андрей:

    Спасибо большое!!! Помогло)

  5. Максим:

    Это понятное дело... а как вот тут выровнять сам текст по вертикали по центру. Типа vertical-align:middle???

  6. Алекс:

    Хорошее решение, только вот центральный блок уходит за пределы окна браузера, когда сужаешь.

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика