title: HTML - Position an image in a new line
body: <p>I have a series of paragraphs. Each one ends with a illustration which clarifies the subject being explained in the paragraph.</p>
  
  <p>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:</p>
  
  <p>Put the illustration in a different &lt;p&gt; than the text related to the illustration.</p>
  
  <pre><code>&lt;p&gt;Some text here&lt;p/&gt;
  &lt;p&gt;&lt;img src="myphoto"/&gt;&lt;/p&gt;
  </code></pre>
  
  <p>This seems to solve all the problems, but later I needed to enclose some of this paragraphs inside a <code>&lt;ul&gt;</code> instead of a <code>&lt;p&gt;</code>. The problem being I cannot enclose the <code>&lt;p&gt;</code> tag for the illustration inside a <code>&lt;li&gt;</code> and does not make sense to put the illustration inside a <code>&lt;li&gt;</code>.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Some text&lt;/li&gt;
      &lt;p&gt;&lt;img src="myphoto"/&gt;&lt;/p&gt;&lt;!--Incorrect--&gt;
      &lt;li&gt;&lt;img src="myphoto"/&gt;&lt;/li&gt;&lt;!--Does not make sense--&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Put the ilulstration inside the same <code>&lt;p&gt;</code> as the text. Then use  <code>&lt;br/&gt;</code> tag to move the picture to a new line. I'm not really happy with this workaround, the <code>&lt;br/&gt;</code> is doing presentational stuff that should be better in CSS.</p>
  
  <pre><code>&lt;p&gt;Some text here&lt;br/&gt;&lt;img src="myphoto"/&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Finally, set the display attribute of the <code>&lt;img&gt;</code> 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.</p>
  
  <p>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.</p>