Vertically aligning CSS :before and :after content

Question

I am trying to centre the link with the image, but can't seem to move the content vertically in any way.

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

The icon is 22 x 22px

.pdf{font-size: 12px;}
.pdf:before{padding:0 5px 0 0; content: url(../img/icon/pdf_small.png);}
.pdf:after{content: " ( .pdf )"; font-size: 10px;}
.pdf:hover:after{color: #000;}

Answer 1

I'm no CSS expert, but what happens if you put vertical-align: middle; into your .pdf:before directive?

Answer 2

Messing around with the line-height attribute should do the trick. I haven't tested this, so the exact value may not be right, but start with 1.5em, and tweak it in 0.1 increments until it lines up.

.pdf{ line-height:1.5em; }

Answer 3

Answered my own question after reading your advice on the vertical-align CSS attribute. Thanks for the tip!

.pdf:before{padding:0 5px 0 0; content: url(../img/icon/pdf_small.png); vertical-align:-50%;}