Os elementos na tag figcaption
não são propriamente alinhados consoante a posição da imagem na tag img, são alinhados consoante a a tag figure, ou seja, quando você define uma propriedade css, text-align="center"
, o que fazes é alinhar o texto ao centro de figure e não de img.
Algo que podes fazer para corrigir isto, é definir um tamanho para a tag figure, e em seguida, atribuir uma propriedade width
ao css de img com 100% do valor, que será igual ao tamanho total desse container (figure
). Assim o texto ficará sempre alinhado ao centro da imagem, e do próprio container.
figure {
width:500px;
height:500px;
}
figure img {
width:100%;
}
figcaption p, i {
text-align:center;
}
NOTA: figcaption p, i repara na vírgula entre os 2 elementos (p, i), sem ela a referência seria ao elemento i
dentro do elemento (p
), com a vírgula a propriedade aplicada, seria para o elemento p
e o elemento i
dentro da tag figcaption.