it-roy-ru.com

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

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

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

  1. Выровняйте два дочерних элемента по горизонтали, чего я достиг, используя float: left и float: right соответственно.

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

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

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

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

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

20
MLister

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

Я использовал display: table-cell; для того, чтобы использовать vertical-align: middle;

18
Ferdinand Torggler

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

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

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

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

@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%);
}
32
Bart Burg

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

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

5
DanMan

В дополнение к использованию таблиц 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 установите значение line-height равным явному значению (1.6em в качестве размера шрифта), position: relative и min-height, чтобы поддерживать достаточную высоту для текста.

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

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

3
Marc Audet
    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/

0
QArea