Перш за все зауважте, що vertical-align
застосовне лише до комірок таблиці та елементів вбудованого рівня.
Існує кілька способів досягти вертикальних вирівнювань, які можуть відповідати вашим потребам. Однак я покажу вам два способи з моїх улюблених:
1. Використання transform
іtop
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<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>
Ключовим моментом є те, що значення процентного співвідношення по 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; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.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
всюди?