Como adicionar legendas a imagens css3

Você pode estar se perguntando que tipo de conteúdo poderia ir com um tag em CSS3. Você pode adicionar botões, dizer, para passar de uma imagem para outra em uma galeria. No entanto, é mais comum para adicionar uma legenda para que as pessoas olhando para o site tem alguma idéia do que a imagem é tudo. O procedimento a seguir descreve como adicionar uma legenda à imagem.

1. Adicione o seguinte tag (em negrito) ao

   encontrada no arquivo SimpleGraphics.HTML e salve o arquivo.

   Uma imagem de um gato bonito!

2. Adicione o seguinte estilo para o arquivo SimpleGraphics.CSS.

   #ImageContainer p {text-align: centro-altura: 20 p; largura: 400 p; margem: 0px;}

   É possível adicionar qualquer quantidade de formatação de texto desejado. No entanto, você deve fornecer um elemento de texto de um tamanho específico ou então a fronteira pode aparecer em um lugar diferente de onde você gostaria que ele apareça.

3. Modificar a propriedade altura #ImageContainer para acomodar o novo elemento de texto. A propriedade deve ficar assim:

   altura: 420px;

   Toda vez que você adicionar novos recursos ao recipiente, você deve redimensionar o recipiente para prendê-los. O tamanho original recipiente era de 400 pixels. Você adicionou 20 pixels valor de texto, para que o novo tamanho é 420px.

4. Salve o arquivo CSS e recarregue a página.

   A imagem inclui agora uma legenda.