Выравнивание блока вертикально по центру.

15.04.2015
Бывает довольно простая, по замыслу, задача превращается в настающую головную боль.

Пример такой проблемы:

Нужно разместить блок, высота которого заранее не известна,  вертикально по центру другого блока.

pic1

Проблема в том, что поведение vertical-align: middle; не всегда совпадает с ожиданием. Дело в том, что он предназначен для работы с таблицами.

Вариант решения:

Будем эмулировать таблицу:

HTML:

1
2
3
4
5
 
<div class="block1">
    <div class="block2">
        <div class="text">Текст который может идти в несколько строк. </div>
    </div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
.block1
{
    width: 890px;
    height: 365px;
    
    position: absolute;
    display: table;

    top: 0;
    left: 0;
}

.block2
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.text
{
    display: inline-block;
}

Категории: Web, HTML, CSS
Яндекс.Метрика