Question

I have two images wrapped in divs, one with caption while another without:

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
  <div class="caption">title</div>
</div>

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
 <div class="caption"></div>
</div>

And corresponding css is as follows:

.figure {
    display: inline-block;
}
.figure a {
    display: block;
}
.figure .caption {
    text-align: center;
    display: block;
    height: 22px;
}

My problem is that even I have assigned height attribute to caption div, it still takes up no space, as a result tops of images are not aligned. Is there any fix to this? The problem code is also available at http://cssdesk.com/cF7G9.

Answer 1

add:

.figure {
    vertical-align: top
}