Welcome to WebmasterWorld Guest from 35.175.191.168

Forum Moderators: not2easy

Message Too Old, No Replies

How do I align an image inline with text

     
2:04 pm on Jun 11, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 2, 2003
posts: 45
votes: 0


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
4:35 pm on June 11, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


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.
12:35 pm on June 12, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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]
7:57 pm on June 12, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 2, 2003
posts:45
votes: 0


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
9:42 am on June 13, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.