html - 带标题的居中图形

Question

如果这是转贴，我很抱歉，但这是我在这里研究了一段时间的东西，我似乎无法得出正确的答案。我试图让这些图像出现在页面的正中央，标题在下面，但它们一直在页面的左侧。

这是我的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>

还有CSS

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

这是我看到的:

提前致谢。我非常感谢任何帮助。

Answer 1

您希望它们水平对齐还是垂直对齐？

垂直:

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

横向:

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