Is there a way to vertically align the text in the figcaption with the image in this figure?
Check out an example here: http://jsfiddle.net/YdATG/1/
Here is the HTML code:
<section class="links">
<a href="#">
<figure class="grid-parent clearfix">
<figcaption class="grid-80 push-20 fontEmphazie">foo</figcaption>
<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">
</figure>
</a>
<a href="#">
<figure class="grid-parent clearfix">
<figcaption class="grid-80 push-20 fontEmphazie">bar</figcaption>
<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">
</figure>
</a>
</section>
And here is the CSS 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;
}