如何使带有标题的图形居中？

Question

我有这个 HTML 和 CSS:

figure {
       display:inline-block;
    margin: 0 auto;
 
}

  figure img {
         display:block;
         margin:0 auto;
         border-radius: 100%;
 }

figcaption {
        display:block;
        padding:8px;

 }

<figure>
    <img src="me.jpg" alt="Author Of The Blog" height="200" width="200">
    <caption>Me and the co-author of this blog, Pepe</caption>
</figure>

我的问题是图形没有居中，我该怎么办？我还需要将标题与照片一起居中。多谢。

Answer 1

我相信您将 figure 显示属性设置为 inline-block 是有原因的。如果是这样，您需要做的就是将父容器 text-align 属性设置为 center:

.container {
    text-align: center;
}

figure {
    display:inline-block;
    margin: 0 auto;
}
figure img {
    display:block;
    margin:0 auto;
    border-radius: 100%;
}
figcaption {
    display:block;
    padding:8px;
}

<div class="container">
    <figure>
        <img src="http://lorempixel.com/200/200" alt="Author Of The Blog" height="200" width="200">
        <caption>Me and the co-author of this blog, Pepe</caption>
    </figure>
</div>

如何使带有标题的图形居中？

How can I center a figure with caption?

html

css

centering