HTML - Position an image in a new line

Question

I have a series of paragraphs. Each one ends with a illustration which clarifies the subject being explained in the paragraph.

I want the illustration to be on a new line and not display along with the text and I have found the following solutions, with it's own problems:

Put the illustration in a different <p> than the text related to the illustration.

<p>Some text here<p/>
<p><img src="myphoto"/></p>

This seems to solve all the problems, but later I needed to enclose some of this paragraphs inside a <ul> instead of a <p>. The problem being I cannot enclose the <p> tag for the illustration inside a <li> and does not make sense to put the illustration inside a <li>.

<ul>
    <li>Some text</li>
    <p><img src="myphoto"/></p><!--Incorrect-->
    <li><img src="myphoto"/></li><!--Does not make sense-->
</ul>

Put the ilulstration inside the same <p> as the text. Then use <br/> tag to move the picture to a new line. I'm not really happy with this workaround, the <br/> is doing presentational stuff that should be better in CSS.

<p>Some text here<br/><img src="myphoto"/></p>

Finally, set the display attribute of the <img> as block in the CSS style sheet. I'm not sure if this is a good way and don't know the unrelated consequences it may have.

I don't know if there is a standard way of doing this. I have search for CSS to start my image in a new line but did not find it. Any help will be welcome.

Answer 1

Ok, so this is my new solution. Basically, we just set the IMG element to be a block-level element.

img { display:block; }  

This solution does not introduce any new markup. (You just place the <img> element right after the text in the paragraph / list item.)

I believe this to be the most elegant solution, since setting images to be blocks is rather common anyway.