Center caption of a figcaption image

Question

I can’t center the image caption relative to the image. I’ve tried with text-align: center; but it didn’t work. Follow the code:

<figure class="foto-legenda1">
    <img src="media/airlines-arena.jpg" class="image1"/>
    <figcaption>
        <p><i> Miami Heat in a game opening </i></p>
    </figcaption>
</figure>

Answer 1

Simply assign a display block to i:

figcaption p i {
  display: block;
  text-align: center
}

Answer 2

The elements in the tag figcaption are not properly aligned depending on the position of the image in the tag img, are aligned according to the tag figure, i.e., when you define a css property, text-align="center", what you do is align the text to the figure and not of img.

One thing you can do to fix this, is set a size for the tag figure, and then assign a property width to the css of img with 100% of the value, which will be equal to the total size of this container (figure). So the text will always be aligned to the center of the image, and the container itself.

figure {
    width:500px;
    height:500px;
}
figure img {
    width:100%;     
}
figcaption p, i {
    text-align:center;  
}

NOTE: figcaption p, i notes the comma between the two elements (p, i), without which the reference would be to the element i within the element (p), with the comma the property applied would be for the element p and the element i within the tag figcaption.