html - figcaption を図の img に垂直方向に揃える方法

Question

figcaption のテキストをこの図の画像に垂直に揃えるにはどうすればよいですか。

参照: http://jsfiddle.net/YdATG/1/

HTML

<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>

CSS

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;
}

Answer 1

私は言うだろう

figure {
    display: table;
}

figure a {
    display: table-cell;
}

figcaption {
    vertical-align: middle;
}

画像がリンクのサイズを決定すると仮定します。