Как вертикально центрировать содержимое дочерних div внутри родительского div в жидком макете

У меня есть div, который содержит два дочерних div, и они предназначены для частичной компоновки жидкости, поэтому я не могу установить фиксированный размер для них в px.

Здесь есть две цели:

  1. Совместите два дочерних divs по горизонтали, которые я достиг с помощью float: left и float: right соответственно.

  2. Вертикально центрируйте текст (внутри дочерних div) относительно родительского div. Текст короткий и занимает одну строчку по дизайну.

Что у меня есть сейчас: http://jsfiddle.net/yX3p9/

По-видимому, два дочерних divs не принимают полную высоту родительского div, и поэтому их текст не вертикально центрирован относительно родительского div.

Концептуально, чтобы достичь поставленных выше целей, мы можем либо сделать дочерние div вертикально центрированными внутри родительского div, либо мы можем сделать дочерние divs на всю высоту родительского div. Каков надежный способ сделать это?

* Поддержка браузера: IE 9+ и другие обычные современные браузеры.

ОТВЕТЫ

Ответ 1

Я обновил вашу скрипку: http://jsfiddle.net/yX3p9/7/

Я использовал display: table-cell; для использования vertical-align: middle;

Ответ 2

Я предпочитаю использовать преобразование выше вышеупомянутых ответов.

top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

По моему опыту он работает во многих ситуациях и во всех основных браузерах (даже IE9+).

Если вы используете SCSS, вам может даже понравиться реализовать этот mixin:

@mixin v-align($position: absolute){
    position: $position;  top: 50%;  
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE */
    -moz-transform:translateY(-50%); /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
    -o-transform:translateY(-50%);
}

Ответ 3

Используйте line-height. Если это только одна строка текста, высокая высота строки эффективно позиционирует текст в середине строки.

Или попробуйте display:table-cell в сочетании с vertical-align.

Ответ 4

В дополнение к использованию таблиц CSS вы также можете использовать абсолютное позиционирование для получения аналогичного макета.

Используя ваш HTML как есть (без дополнительных элементов), примените следующий CSS:

html, body {
    height: 100%;
    width: 100%;
    font-size: 13px;
}
.parent {
    background-color: grey;
    height: 20%;
    line-height: 1.6em;
    font-size: 1.6em;
    min-height: 1.6em;
    position: relative;
}
.left, .right {
    position: absolute;
    top: 50%;
    margin-top: -0.8em;
}
.left {
    background-color: yellow;
    padding-left: 20px;
    left: 0;
}
.right {
    background-color: red;
    padding-right: 20px;
    right: 0;
}

Вы можете увидеть демонстрационную скрипту по адресу: http://jsfiddle.net/audetwebdesign/cByHa/

В контейнере .parent установите высоту строки в явное значение (1.6em как размер шрифта), position: relative и min-height чтобы поддерживать достаточную высоту для текста.

Два дочерних элемента .left и .right располагаются абсолютно top: 50% и используют margin-top: -0.8em чтобы получить вертикальное центрирование (используйте половину значения высоты строки).

Используйте левое и правое смещения (или отступы), чтобы при необходимости отрегулировать положение дочерних элементов по горизонтали.

Ответ 5

    html, body {
    height: 100%;
    width: 100%;
    font-size: 13px;
}

.parent {
    height: 50px;
    background-color: grey;
    font-size: 1.6em;
}

.left {
    margin-left: 2%;
    float: left;
    background-color: yellow;
    height:100%;   
}

.right {
    margin-right: 2%;
    float: right;
    background-color: red;
    height:100%;    
}
.parent span{
    display:table;
    height:100%;
}
.parent em{
    display:table-cell;
    vertical-align:middle;

}

http://jsfiddle.net/yX3p9/13/