Last Updated: February 25, 2016
·
6.928K
· 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>