0

Não consigo centralizar a legenda da imagem em relação a imagem. Já tentei com text-align: center; mas não deu certo. Segue o código:

<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>
1
  • 1
    Pode fornecer o CSS usado também? Commented 18/11/2015 às 17:43

2 Respostas 2

1

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.

0

Basta atribuir um display block no i:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .