Text wrapping under IMG vertical-align:middle not working
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:
alt text http://preview.moveable.开发者_Go百科com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
- I have a height and
overflow-y:scroll
on theUL
(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?
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
}
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.
Seems to me you could float the image left.
精彩评论