Vertical alignment with CSS
I only have some nitpicks about formatting and readability.
Hopefully somebody else will comment specifically about good approaches for treating vertical alignment.

It would be more readable (and the common convention) to put a space after colons.
So instead of:


background-color:rgba(0, 0, 0, 0.1);
text-decoration:underline;



Write as:

background-color: rgba(0, 0, 0, 0.1);
text-decoration: underline;


And don't put two definitions on the same line like this:


vertical-align:middle;  text-decoration:none;



It's better when code reads from top to bottom,
and your eyes can stay focusing on the left,
rather than dipping deeper into the right part, like this:

vertical-align: middle;
text-decoration: none;