Question

I have links and a sprite image I want to render in one line centered vertically:

HTML:

<a href="/videos/12" class="normal video_title">Why Eminem is the best</a>
<div class="sprite" id="pointer"></div>
by
<a href="/profiles/1" class="feed_image"><img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692"></a>
<a href="/profiles/1" class="normal squeeze">Justin Meltzer</a>

How would I get all of these elements on one line?

I’d do a jsfiddle but I don’t have my sprite images at a public url

Answer 1

Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?

http://jsfiddle.net/gUrc9/

div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }

UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.

span.sprite { display: inline-block; }