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

Question

I have this HTML and 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> 

My problem is that the figure is not centered, how can I do that? I also need to center the caption along with the photo. Thx a lot.

Answer 1

I believe you set figure display property to inline-block for reason. If so all you need to do is to set parent container text-align property to 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>