Vertical alignment in CSS

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

enter image description here

That is all you need to do is

display: flex;
align-items: center;
Browser support considerations


display: -webkit-flex;
-webkit-align-items: center;


Set layout.css.flexbox.enabled to true.

Alternatively you can still use

display: -moz-box;
-moz-box-align: center;

Just know that this is not css3-flexbox and that it will not wrap.


You can try the syntax from Advanced cross-browser flexbox.

See this fiddle (Remember to set layout.css.flexbox.enabled to true if you're on FF.)

This note is a reproduction of my answer to a question on Stack Overflow.