JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<a href="#">
     <figure>
       <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Bundesarchiv_B_145_Bild-F038805-0013%2C_Wolfsburg%2C_VW_Autowerk%2C_Teststrecke%2C_K%C3%A4fer.jpg/220px-Bundesarchiv_B_145_Bild-F038805-0013%2C_Wolfsburg%2C_VW_Autowerk%2C_Teststrecke%2C_K%C3%A4fer.jpg" alt="Auto von Wikipedia" />
      <figcaption>Erklärung</figcaption>
   </figure>
</a>
</div>

SCSS

.wrapper {
    text-align: center;
}

a {
    display: inline-block;
    width: auto;    
    margin: 0;
    padding: 0;
    background-color: grey;
}

figure {
    display: table;

    margin: 0;
    border: 1px dotted red;
}

figure > img,
figure > figcaption {
    display: table-cell;
    padding: 10px;
    vertical-align: middle;
}