How do I align an image inline with text

[donok]

Hello!

I have this recurring problem that I can't seem to find a simple css solution to. How do I get something like an arrow at the end of a paragraph, or just sitting next to a word, align center (vertically) with that line.

The old "align:absmiddle" seems to give me mixed results. I think maybe my line spacing CSS is screwing it up? Should I prep the image in some way to have a few pixels of blank space at the bottom or top, and space it that way? Do I give the image a top-padding:-3px to nudge it up?

What's the best practices? Anyone have a trick?

thanks,
Don

[rocknbil]

You'd likely want it to be a link....

.more { padding: 0 12px 4px 0; text-decoration:none; background: url(/images/more-arrow.gif) top right no-repeat; }

.more:hover{ background: url(/images/more-arrow-over.gif) top right no-repeat; }

text text <a class="more" href="some link.html">read more</a>

If you want a static no-link widget, play around with <span> as it's a natural inline element and should align with the line of text fairly well. In fact, as posted the above may not work in your specific environment without a little adjustment, but the answer lies in BG images on elements and padding.

[alt131]

Another option is vertical-align [w3.org]:middle.*

Line-height should not be a problem, although it may affect the calculations the browser is performing. Sometmes it is easier to get the desired aligment by using length or percentage rather than a keyword.

*Applied to the image
[edit] for clarification [/edit]

[donok]

Thanks for the help on this - I ended up going with the background image - so much easier to manipulate - heck, I can even do a rollover image, now. Very cool.

-- DOn

[alt131]

Thanks for letting us know you found a solution - and definitely use backound-image if you already had something like a link (as in rocknbil's solution) to use as a "hook" for the image: Keeps style in the css (where it belongs) rather than the HTML.