Search code examples
htmlcssimagecentering

Centering Figures with Captions

I'm sorry if this is a repost, but this is something I've been researching on here for awhile now and I can't seem to come up with the right answer. I'm trying to get these images to appear in the exact center of the page with the captions underneath, but they keep going on the left side of the page.

Here's my html

<figure>
    <img src="apple.jpg" alt='apple/>
    <figcaption>Apple</figcaption>           
</figure>       
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>
<figure>
    <img src="apple.jpg" alt='apple'/>
    <figcaption>Apple</figcaption>           
</figure>

And the css

figure{
   display: inline-block;
   margin: 0 auto;
}
figure img{
   vertical-align: top;                 
}
figure figcaption{
   text-align: center;
}

Here's what I see:

enter image description here

Thanks in advance. I greatly appreciate any help.

Solution

  • You want them horizontally or vertically aligned?

    vertically:

    figure {
  display: block;
  text-align: center
}

    horizontally: 

    body {
  text-align: center;
}
figure {
  display: inline-block;
  text-align: center
}