HTML - Position an image in a new line

Question

I have a series of parragraphs. Each one ends with a ilustratión which clarifies the subject being xplained in the parragraph.

I want the ilustration 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 ilustration in a different <p> than the text related to the ilustratión.

<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 parragraphs inside a <ul> instead of a <p>. The problem being I cannot enclose the <p> tag for the ilustration inside a <li> and does not make sense to put the ilustration 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 ilustration 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 consecuences 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; }  

Live demo: http://vidasp.net/tinydemos/paragraph-image.html

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.

Answer 2

You're almost there, the simplest way is to wrap the text, and the image in block level elements:

For paragraphs:

<div class="paragraph">
  <div class="text">Some text</div>
  <div class="illustration"><img src="myphoto" /></div>
</div>

For list-items:

<ul>
  <li>
    <div class="text">Some text</div>
    <div class="illustration"><img src="myphoto" /></div>
  </li>
  <li>
    <div class="text">Some text2</div>
    <div class="illustration"><img src="myphoto2" /></div>
  </li>
</ul>

The classes are optional on the divs, but it allows you to further style them in CSS if you want.