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

Question

我有这个HTML和CSS：

＆＃13;

＆＃13;

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

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

figcaption {
        display:block;
        padding:8px;

 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的问题是这个数字没有居中，我该怎么做？我还需要将标题与照片对齐。多谢。

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;