Выровнять текст по центру (по вертикали) у div
с display: inline-block
. При использовании vertical-align
меняется положение самого блока. Возможно ли это сделать без обертывания текста в <p>
?
3 ответа
div {
width: 100px;
height: 100px;
padding: 5px;
display: inline-block;
vertical-align: top;
border: 1px solid #f00;
text-align: center;
}
div:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
<div>text</div>
Возможно
Мой любимый костыль, сам пользуюсь
<style>
.div-table{
display: table;
width: 100%;
height: 100%;
}
.div-table-cell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
В любой нужный элемент вписывается div-table, в него div-table-cell, и вот в него уже всё, что нужно разместить по центру по вертикали
<div>
<div class="div-table">
<div class="div-table-cell">
...что угодно, не только текст
</div>
</div>
<div>
-
Не самый лучший вариант тк тут меняется тип элемента.– user27257529 дек 2017 в 20:55
vertical-align:
Оно применяется только к строчным элементам inline или строчным блокам inline-block. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.