vertical-align + table-cell + position = ?
важность: 5
В коде ниже используется вертикальное центрирование при помощи table-cell + vertical-align.
Почему оно не работает? Нажмите на просмотр, чтобы увидеть (стрелка должна быть в центре по вертикали).
<style>
.arrow {
position: absolute;
height: 60px;
border: 1px solid black;
font-size: 28px;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="arrow">«</div>Как починить центрирование при помощи CSS? Свойства position/height менять нельзя.
Подсказка
Центрирование не работает из-за position: absolute.
Решение
Центрирование не работает потому, что position: absolute автоматически меняет элементу display на block.
В однострочном случае можно сделать центрирование при помощи line-height:
<style>
.arrow {
position: absolute;
height: 60px;
border: 1px solid black;
font-size: 28px;
line-height: 60px;
}
</style>
<div class="arrow">«</div>Если же центрировать нужно несколько строк или блок, то есть и другие техники центрирования, которые сработают без display:table-cell.