У меня есть два DIV внутри родительского div. Я хочу, чтобы они были:

enter image description here

Поэтому я искал примеры этого, потому что это такая тривиальная проблема. Я попробовал несколько примеров из SO, но для моего примера это не имело никакого значения. Я пробовал выравнивать по вертикали: по центру; и встроенный блок, но безуспешно. Вот моя скрипка.

http://jsfiddle.net/Sz2fU/1/

HTML

Играть A

CSS

.parentBox
{
    height: 100px;
}
.left_box
{
    display: inline-block;
    vertical-align: middle;
    background:green;
    float:left;
}
.right_box
{
    width: 18%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background:blue;
    float:right;
}
.inputBox
{
    height:80px;
}
0
Georgi Angelov 9 Июл 2014 в 23:37

3 ответа

Лучший ответ

Уловка здесь состоит в том, чтобы использовать display: table для родительского div и display: table-cell для дочерних элементов; в противном случае vertical-align не соблюдается.

JSFiddle: ДЕМО

.parentBox {
    width: 100%;
    height: 100px;
    border: 1px solid lime;
    display: table;
}

.left_box,
.right_box {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.left_box {
    background:green;
}
.right_box {
    width: 18%;
    height: 100%;
    background:blue;
}
.inputBox {
    height:80px;
}
1
jonsuh 9 Июл 2014 в 20:05

Добавьте line-height: 100px к родительскому div. Vertical-align:middle относится к line-height, поэтому установка его на высоту блока выполнит свою работу. Только не забудьте сбросить line-height в нормальное состояние для дочерних элементов (иначе они тоже будут с line-height: 100px, и если текст в нем более чем на одну строку, вы получите огромный блок).

0
MrLore 9 Июл 2014 в 23:07

Чтобы vertical-align работал в table, нам нужно будет использовать table-cell

Попробуйте это:

Добавить display:table; и width:100%; в .parentBox

Удалите float из .left_box и .right_box

Добавьте display: table-cell; и text-align:center; в .left_box и .right_box

Вам нужно было добавить text-align:center;, чтобы центрировать вход по центру.

Демонстрация JSFiddle

Подробнее здесь для вертикального выравнивания.

Примечание. IE7 и более ранние версии не поддерживают display:table; или display: table-cell;

2
Community 20 Июн 2020 в 09:12