Прежде всего обратите внимание, что vertical-align
это применимо только к ячейкам таблицы и элементам встроенного уровня.
Есть несколько способов добиться вертикального выравнивания, которые могут соответствовать вашим потребностям, а могут и не соответствовать. Однако я покажу вам два метода из моих любимых:
1. Использование transform
иtop
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Ключевым моментом является то, что процентное значение on top
относится к height
содержанию блока; В то время как процентное значение transform
s относится к размеру самого поля (ограничивающего прямоугольника).
Если вы испытываете проблемы с отображением шрифта (размытый шрифт), исправьте это, добавив perspective(1px)
в transform
объявление, чтобы оно стало:
transform: perspective(1px) translateY(-50%);
Стоит отметить, что CSS transform
поддерживается в IE9 + .
2. Использование inline-block
(псевдо) элементов
В этом методе у нас есть два родственных inline-block
элемента, которые выровнены по вертикали посередине посредством vertical-align: middle
объявления.
Один из них имеет height
от 100%
своего родителя , а другой наш искомый элемент которого мы хотели , чтобы выровнять его по центру.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0;
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px;
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Наконец, мы должны использовать один из доступных методов для устранения разрыва между элементами встроенного уровня .
position: absolute
везде?