To vertically-center align text in a table-cell, I use vertical-align: middle
in the td
.
But the above doesn't work with divs, spans, header and other non-table elements. So how can I vertically-center align text in such elements ?
To vertically-center align text in a table-cell, I use vertical-align: middle
in the td
.
But the above doesn't work with divs, spans, header and other non-table elements. So how can I vertically-center align text in such elements ?
Just use the following style :
<style type="text/css">
div {
vertical-align: middle;
display: table-cell;
}
</style>
That way, you are "displaying" the div
as a table-cell and since vertical-align
works with table-cells, you're text will be center-vertically aligned.
If it's a single line of text, you can set the line height to be the same height as the element.
There are many possibilities, each with it's advantages and drawbacks.
Here's a good article by Douglas Heriot explaining 5 others methods, and comparing them.