CODEWITHSUNDEEP
htmlcsscentering
user4491949
user4491949

Reputation:

How can I center a figure with caption?

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.

Upvotes: 1

Views: 72

Answers (1)

dfsq
dfsq

Reputation: 193261

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>

Upvotes: 2

Related Questions