CSS: How to vertically align text in a div? (or any other elements that are not a table)

To align text vertically in a table cell, I use vertical-align: middlein td.

But the above does not work with divs, spans, header and other elements other than the table. So, how can I vertically align text in such elements?

+1
source share
3 answers

There are many possibilities, each of which has advantages and disadvantages.

Here's a good Douglas Heriot article explaining 5 more methods and comparing them.

+2
source

, , .

+2

:

<style type="text/css">
    div {
            vertical-align: middle;
            display: table-cell;
        }
</style>

Thus, you "display" divas a table cell, and since it vertical-alignworks with table cells, you will be vertically aligned in the center.

0
source

Source: https://habr.com/ru/post/1716406/


All Articles