Вертикальное выравнивание элемента с переменной высотой в CSS
Вертикальное выравнивание относительно позиционированного элемента с переменной высотой. То есть, когда его высота не задана в определённом виде, а становится то больше, то меньше, в зависимости от контента:
Элемент с переменной высотой
HTML код:
<div class="example">
<div class="element">
Элемент с переменной высотой
</div>
</div>
CSS код:
.example {
height: 200px;
white-space: nowrap; /* Для случаев, когда родительский контейнер уже, чем элемент */
}
.example:after {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.element {
display: inline-block;
vertical-align: middle;
white-space: normal; /* Для случаев, когда родительский контейнер уже, чем элемент */
}
Поддержка в браузерах
- Windows
- Internet Explorer 8.0+
- Firefox 3.0+
- Google Chrome 1.0+
- Opera 9.5 - 9.64, 11.5+
- Safari 3.1+
- Linux
- Firefox 3.0+
- Google Chrome 1.0+
- Opera 9.5 - 9.64, 11.5+