Last Updated: February 25, 2016
·
7.148K
· gesposito

vertical-align: middle for multi line anchors (links)

Single line links

If you have a single line link a proper display (inline-block or block), height, line-height will teach its text to align in the middle.

.single-line {
 display: inline-block;
 width: 60px;
 height: 40px;
 line-height: 40px;
}

Multi line links

It gets more complicated if you have a multi line link that you want to vertically align into the middle.
If this is your case, then use display: table-cell (IE8+) and vertical-align: middle to let it behave like an old fashioned < td >.

.multi-line {
 display: table-cell;
 width: 60px;
 height: 40px;
 vertical-align: middle;
}

Then simply adjust its font-size and line-height for proper style and spacing.

Bonus Tip

If your link is going to behave like a button, then simply use the HTML5 < button > tag, its text will automatically align into the middle even if its width is going to let it split over multiple lines.

<button>Multi Line Text</button>