I can not center the caption of the image relative to the image. Already tried with text-align: center; but it did not work. Here is 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>
The elements in the figcaption tag are not properly aligned according to the position of the image in the img tag, they are aligned according to the figure tag, that is, when you define a css property, text-align="center" , what you do is to align the text to the center of figure and not img .
One thing you can do to fix this is to set a size for the figure tag, and then assign a width property to the img css with < in> 100% of the value, which will be equal to the total size of this ( figure ) container. 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%;
}
figurecaption p, i {
text-align:center;
}
NOTE: figurecaption p, i fixes the comma between the 2 elements (p, i), without it the reference would be to the element
iwithin the element (p), with comma the applied property would be for the elementpand the elementiinside the figcaption tag.
Just assign a display block in i:
figcaption p i {
display: block;
text-align: center
}