Text wrapping under IMG vertical-align:middle not working

Question

I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:

My HTML is simple:

<ul>
   <li><img .../> some text </li>
   ...
</ul>

• I have a height and overflow-y:scroll on the UL (likely not relevant)
• I have a height set on the LI that is large enough for the placeholder image plus spacing.
• I have vertical-align:middle on the image to get the text in the right place, almost
• The rest is just margins and borders
• Am am NOT using floats

How can I get the text to wrap properly, perferably without more markup?

Answer 1

As @graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.

If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:

<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>

Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.

Answer 2

Seems to me you could float the image left.

Answer 3

If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing

  li {
      background: url(/images/foo.jpg) center left no-repeat;
      padding-left: barpx;
  }

you could also use a margin on the li to allow for spacing to the left of the image inside the ul

if the images are different i would simply apply a class to each li to distinguish the difference

edit for seo friendlyness:

add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.

  li img {
     display:none
  }