title: adding text below image in a list in HTML
body: <p>Here is what I want to do:
  I want to have a few images in a list and I want to have text below each image and very close to each image. </p>
  
  <p>I have tried to use <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> but it messes things up. </p>
  
  <p>Here is my list in the html:</p>
  
  <pre><code>&lt;div class="verticalStrip"&gt;
      &lt;br&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;img src="image1.png" alt="im1"/&gt;&lt;/li&gt;
          &lt;li&gt;text1&lt;/li&gt;
          &lt;li&gt;&lt;img src="image2.png" alt="im2"/&gt;&lt;/li&gt;
          &lt;li&gt;text2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>And here is what I get:</p>
  
  <p><img src="https://i.stack.imgur.com/2Cae0.png" alt="enter image description here"></p>
  
  <p>And this is what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/L5dYq.png" alt="enter image description here"></p>
  
  <p>I appreciate any help on this.</p>
  
  <p><strong>UPDATE1:</strong>
  After applying the suggestion in one of the answers as adding this to css:</p>
  
  <p>img {
      display: block;
     }</p>
  
  <p>I got this:</p>
  
  <p><img src="https://i.stack.imgur.com/WocB4.png" alt="enter image description here"></p>