Search code examples
csshtmlsemantics

Having a fcaption align with the img

This is my code

<figure>
 <img class="music-player--album-image" src="img/album1.png">
 <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

And this produces the image and below it the figcaption, what I'm trying to do is have the caption to the side of the image, aligned vertically as well to be in the center next to the image.

Any ideas how? Thanks

Solution

  • TRY THIS - DEMO

    HTML

    <figure>
 <img class="music-player--album-image" src="http://placehold.it/350x150">
 <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

    Give CSS style display: table; to figure, display: table-cell; and vertical-align: middle; to img, figcaption. You can also use padding to style the figcaption.

    CSS

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