Vertical positioning of a pseudo-image element (CSS)

Question

I use the :before pseudo-element to add a small image to the download link on my site. The height of the image is greater than the height of the line, and the bottom of the image is the same as the bottom of the text.

How to change the vertical alignment of a pseudo-element? Ideally, does the center of the image coincide with the center of the text?

Answer 1

I find that this works in most cases if the text and image do not fail:

 #elem:before { content: url(image.png); position: relative; bottom: -.5ex; margin-right: .5em; } 

margin-right puts a little space between the image and the text.

Answer 2

Make an inline elment image, set the hegth line for it and set the vertical snap to the container.

Answer 3

I could not find an elegant solution. Here is jsFiddle with a working solution:

http://jsfiddle.net/rcravens/pAcDE/

Given the following element:

 <div id='elem'>Bob Cravens</div> 

I have this CSS:

 #elem:before{ content: ''; height: 160px; width: 136px; background: url('http://bobcravens.com/Content/images/author_thumb.png'); position: absolute; top: 0px; left: 0px; } #elem{ background-color: red; margin: 60px 136px; } 

: earlier, you probably have, besides the "position: absolute" style. Then I used margin to offset the original div.

Hope this helps.

Bean