如何在换行文字的中间对齐图像

Question

I am trying to wrap an image with some adjacent text, and i can align it to top-left and top-right using align="" attribute or float . But how can i align image to the vertical and horizontal center of whole text after wrapping.

Like this:

I have tried below code,

<p>
<img align="middle" src="http://placehold.it/140x100" /> Some More text Here....
</p>

Answer 1

Solution 1

Fiddle 1 for the image shown in the question:

CSS:

html, body
{
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#main{
    width:100%;
    text-align:justify;
    margin:0;
    padding:0;
}
.class1{
    position:absolute;
}
#child1{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:justify;
    margin:0;
    padding:0;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
    background-position:50% 50%;
    background-repeat:no-repeat;    
}

---

Solution 2

If you want to wrap the text around the only way to do it is using float.See this Fiddle 2

CSS :

.class1 img{
    float:left;
}

---

Solution 3

But the above solution will not allow you to center the image.For centering image you will have to do some trick like this Fiddle 3 . But this will require large amount of effort to adjust writing between the two columns/divs.

Answer 2

You won't be able to do it with a single block of text (I can't think of a single instance where it's aesthetically pleasing and functionally desirable, but I'd love to be proved wrong), but you can with two columns. There's a great article on it here:

http://alistapart.com/article/crosscolumn

Essentially, you use pseudo-elements to create an empty space that is the same size as the image, then position the image onto that space.