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>
Written by Gianluca Esposito
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#