Paragraph image centering

Question

I'm looking for a purely CSS method for centering an image in a paragraph of text so that the text wraps on both sides of the image.

Ideely the image |-----| would be placed before or after |-img-| the text within the code structure|-----| and the text would wrap around the image. 

Answer 1

Found an answer that works quite well: http://www.alistapart.com/articles/crosscolumn/

Answer 2

It is assumed that browsing the IE10 platform presumably (according to this article ) there is a new feature called positioned floats that seem to reach what you are looking for.

However, I think you are screwed: /

Answer 3

I do not think that's possible:

 <p> Text that goes here and image <img src="img.jpg"/> continues text</p> 

As far as I know, browsers treat <p> content as belonging to a string, so when the browser parses your p tag that contains the image, it will automatically make that string as tall as the image.

Perhaps this is possible with css3, though ...

Answer 4

There is currently no way to do this. I looked far and wide.

The other answers here do not address the question as asked. This link (A List Apart) requires the use of two paragraphs of text, and you cannot do this dynamically because you must be careful to match the text on both sides of the image.

Another, positioned IE10 float (Microsoft calls them exceptions ) does its job, but with a list of caveats:

• IE only.
• You need to specify things like the number of columns, not the offset.
• This does not work well when resizing a window. Other content overlaps and the container maintains a minimum size.