'Shift img few pixels up or down

This seems trivial, but I cannot find anything. I have a text and small image (icon) inside the text like this:

<span>ask<img src=ask.svg height=16> fav<img src=fav.svg> voted</span>

All I need is to move the image few pixels up or down to look better with the text.

I tried CSS styles like margin-top:3px, padding-top:3px, display:absolute, display:relative and some others, but nothing works.

UPDATE: I do not need vertical align to middle. Yes, it looks better, but I still want to be able to shift the image a few pixels manually. So my question remains: how to fine tune the image vertical position within the text by a few pixels in any direction.

enter image description here

htmlcss


Solution 1:[1]

You can set position: relative for img, then move it with top or bottom http://jsfiddle.net/kencoder97/xu4158fL/

An example to move an image upwards by a couple of pixels would be

<img src="my_image.jpg" style="position: relative; bottom: 2px">

Solution 2:[2]

http://jsfiddle.net/v594fvgr/

span img {
    vertical-align:middle;
}

Solution 3:[3]

Note: margin-top not marginTop..same goes for padding etc. learn more about html and css syntax.

<span>ask<img src=ask.svg height="16" style="margin-Top:-6px">fav<img src=fav.svg> voted</span>

It's a good idea to take your image out of span tags,

  <span>ask</span><img src=ask.svg height="16" style="margin-Top:-6px"><span>fav</span><img src=fav.svg><span> voted</span>

or just use div for wrapper

<div>ask<img src=ask.svg height="16" style="margin-Top:-6px">fav<img src=fav.svg> voted</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ric S
Solution 2 sinisake
Solution 3

Related Questions