title: How to make text stay under an image (responsive design)
body: <p>I have 3 images in a raw (using Bootstrap). Under each image there should be a heading, a link and a paragraph of text. All three elements should be centered under the image. As the screen gets smaller, the images go one under another, and those three elements must stay centered under the images. I managed to do this with a heading and a link, it works as needed:</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
   &lt;figure&gt;
    &lt;img class="img-responsive" src="..." alt="ProjectName"&gt;
     &lt;figcaption&gt;
      &lt;h3 class="text-uppercase"&gt;Project Name&lt;/h3&gt;
      &lt;p&gt;&lt;a href="http://..."&gt;Link to project&lt;/a&gt;&lt;/p&gt;
     &lt;/figcaption&gt;
   &lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when I add a paragraph of text like this</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
   &lt;figure&gt;
    &lt;img class="img-responsive" src="..." alt="ProjectName"&gt;
     &lt;figcaption&gt;
      &lt;h3 class="text-uppercase"&gt;Project Name&lt;/h3&gt;
      &lt;p&gt;&lt;a href="http://..."&gt;Link to project&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;Some text&lt;/p&gt;
     &lt;/figcaption&gt;
   &lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>all three elements (heading, link and text) don't stay under the image as the screen gets smaller. Instead, they align in the center of the screen.</p>
  
  <p>Here are my css styles:</p>
  
  <pre><code>figure {
      display: inline-block;
  }
  
  figure figcaption {
      text-align: center;
  }
  </code></pre>
  
  <p>Any ideas how ho fix this?</p>