Adjust Position of Image that is Inline with Text

[Evetsm]

I have a <p> element with an inline image, however, the image is raised about the text baseline:

span.JPG

I would like to lower the image or possibly vertically center it in the textline. I was thinking enclosing it in a span element and setting the span's background attribute to the image, then somehow setting the image's position.

Is it possible to do this?

Thanks,
Steve

[Nita Beck]

What I've done for my inline button images is to create a class of img (e.g., img.Button) and give it a negative bottom margin of something like -4px or -4pt (depending on whether I'm outputting to an online format or a print format). Seems to work OK.

[MattyQ]

If you haven't tried it already, you can also create a class that would assign a vertical-align property to the image, which may help. Nita's definitely works, this is just utilizing the CSS property that exists for just this sort of issue. Here's a JSfiddle demonstrating what each vertical-align value looks like, and some example using them as classes:

https://jsfiddle.net/MattyQ/h8bdc6zo/1/embedded/result/

Code: Select all

img.sub {
    vertical-align: sub;
}

img.super {
    vertical-align: super;
}

img.top {
    vertical-align: top;
}

img.text-top {
    vertical-align: text-top;
}

img.middle {
    vertical-align: middle;
}

img.bottom {
    vertical-align: bottom;
}

img.text-bottom {
    vertical-align: text-bottom;
}

img.lengthplus {
    vertical-align: 15px;
}

img.lengthminus {
    vertical-align: -15px;
}

[Evetsm]

Thanks, Nita and Matty!

[Nita Beck]

I can't quite remember now, but I think that I didn't get the results that I was looking for with the vertical-align attribute, and so resorted to the negative bottom margin. But I'm intrigued enough to re-examine my solution.

[MattyQ]

I can't quite remember now, but I think that I didn't get the results that I was looking for with the vertical-align attribute, and so resorted to the negative bottom margin.

I think the only issue with using the margin-bottom method is that it's not "respectful" to other elements. For example:

marginvsvertalign.png

That said, this is a very extreme example (I wouldn't call it a valid use case), so unless you're suddenly deciding to change your line-heights, or setting crazy margins on your inline images, you're probably fine. =)

[Evetsm]

Thanks Nita for digging into this.