title: how to vertically align figcaption to img in figure
body: <p>How do you vertically align the text of the figcaption to the image in this figure.</p>
  
  <p>See: <a href="http://jsfiddle.net/YdATG/1/" rel="nofollow">http://jsfiddle.net/YdATG/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section class="links"&gt;
     &lt;a href="#"&gt;
      &lt;figure class="grid-parent clearfix"&gt;
              &lt;figcaption class="grid-80 push-20 fontEmphazie"&gt;foo&lt;/figcaption&gt;
              &lt;img alt="Foto" src="http://www.google.com/intl/de/homepage/images/google_favicon_64.png" class="grid-20 pull-80 grid-no-pad-left grid-no-pad-right"&gt;
      &lt;/figure&gt;
     &lt;/a&gt;
     &lt;a href="#"&gt;
      &lt;figure class="grid-parent clearfix"&gt;
                  &lt;figcaption class="grid-80 push-20 fontEmphazie"&gt;bar&lt;/figcaption&gt;
                  &lt;img alt="Foto" src="http://www.google.com/intl/de/homepage/images/google_favicon_64.png" class="grid-20 pull-80 grid-no-pad-left grid-no-pad-right"&gt;
      &lt;/figure&gt;
     &lt;/a&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>section.links figure, section.links figure {
      background-color: #f3f3f3;
      padding: 0.5em;
      margin-bottom: 1em;
  }
  
  section.links figure {
      margin-top: 1em;
  }
  
  section.links figcaption, section.links figcaption {
      padding: 0 0.5em;
  }
  
  section.links a, section.links a {
      font-size: 0.9em;
      color: #000;
  }
  </code></pre>