Question

I’m using a img tag before a h3 tag, no break statements used. But when I run it in the browser it displays the 2 tags on separate lines. Is there a CSS technique that can fix this or maybe an even easier tag attribute that will make the two elements display on the same line?

Thanks in advance!

——————————- edit ———————————————-

The answers so far work well. But it’s not there quite yet. If you look at the screenshot you’ll see what I want (I should’ve specified in the first place, i know)…

If I use one of the methods above, you’ll see that the h3 tag is not floating in the middle of the img tag. I want the h3 tag to float right in the middle of the image..

Answer 1

Two options:

1. Use a line-height attribute for h3 which equals to your img‘s height.

2. Use padding-top and padding-bottom for to your h3 and play with it to get what you want.