es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo añadir texto al mismo
debajo de la imagen?

18 Jul, 2023 Programación

Aquí está mi código, pero el problema es que el texto está a la derecha de la imagen, pero no debajo de la imagen. ¿Cómo puedo agregarlo correctamente?

figure {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
}

figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="img/books/2019/Rhonda Byrne - Paslaptis.jpg" alt="Rhonda Byrne - Paslaptis">
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar el texto debajo de la imagen, simplemente puedes agregar otro elemento dentro de la etiqueta

    después de la etiqueta de la imagen. Por ejemplo, puedes agregar una etiqueta de párrafo con el texto que deseas mostrar:

    <figure>
  <img src="img/books/2019/Rhonda Byrne - Paslaptis.jpg" alt="Rhonda Byrne - Paslaptis">
  <figcaption>Rhonda Byrne - Paslaptis</figcaption>
  Este es el texto que se mostrará debajo de la imagen.
</figure>

    Luego, puedes aplicar estilos a la etiqueta de párrafo dentro de la etiqueta

    en tu archivo CSS para lograr el diseño deseado.

Comments are closed.