Question

I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.

A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.

B. an image defined via an <img> element whose both height and width
are known.

Other requirements:

1. There must be 12px of space between the text and the <img> element.

2. Important: both the text from A. and the image from B. must be
   centered as a group.

3. The text from A. must be vertically centered in its enclosing space.

How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.

Anyone know how to solve this simple problem?

---

Thank you all for your answers, seems CSS makes simple things so hard,
anyways:

  div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
  div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
  div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }

Answer 1

Is this what you are trying to achieve? http://dabblet.com/gist/3130292