title: How to put a text (span) below the image with CSS
body: <p>I am trying to learn CSS and HTML and have a very basic question here. How do i write my css so that it shows the text in the span below the image</p>
  
  <pre><code>&lt;div class="section"&gt;
      &lt;ul&gt;
          &lt;li id="lumia820" class="figures" &gt;
              &lt;img src="f-lumia820.jpg" alt="" class="figure"/&gt;
              &lt;span class="figcaption"&gt;Lumia 820&lt;/span&gt;
          &lt;/li&gt;
          &lt;li id="iphone4s" class="figures"&gt;
              &lt;img src="f-iphone4s.jpg" alt="" class="figure"/&gt;
              &lt;span class="figcaption"&gt;Iphone 4s&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently, I have something like </p>
  
  <pre><code>.section ul {
      margin: 0 auto;
      float: left;
  }
  
  .figures {
      display: inline;
  }
  
  .figures span {
      font-size: 20px;
      font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
      letter-spacing: 0.1em;
  }
  
  .figures img{
      vertical-align: top;
      width: 30%;
      height: 30%;
      margin: 1% 1%;
  }
  </code></pre>