Welcome to WebmasterWorld Guest from 34.225.194.144

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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members