Как установить вертикальное выравнивание пролета по середине деления

Question

Я тестирую вертикальное выравнивание с помощью простого HTML-кода, но он не работает

<div style="height:45px; border: solid 1px black;">
    <strong style="vertical-align:bottom;">
        abc
    </strong>
</div>

Answer 1

Вот как ты это делаешь

<div style="height:45px; border: solid 1px black; display: table;">
    <strong style="vertical-align:bottom; display: table-cell;">
        abc
    </strong>
</div>

Демо

Как я упоминал ранее, вертикальные выравнивания очень сложны. Чтобы это работало, как в случае таблицы, установите родительский контейнер для отображения table, а внутренние <div> s или elements для отображения table-cell

Answer 2

Дайте родительскому полю (в вашем случае div) свойства height, display: table-cell и vertical-align: middle.Вот пример:

<div style="height:100px; border: solid 1px black; vertical-align:middle;display:table-cell;">
    <span style="">abc</span>
</div>