Build a Tribute Page - Problem to center img

Hello, all.
I’m having problems to solve the following items of the Certification project:

  • Your img element should have a display of block.
  • Failed:Your #image should have a max-width of 100%.
  • Failed:Your #image should be centered within its parent.

You can find all the code below. As you can see, the first two items are there. I cannot find what went wrong. Can anybody help me or give me a hint?
Thanks!

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Página tributo</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Font family -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main id="main">
        <!-- Título -->
      <h1 id="title">Jorge Luis Borges</h1>
      <h2>Exponente de las letras argentino</h2>

      <!-- Imagen -->
      <figure id="img-div">
        <img id="image" src="img/borges-frente.avif" alt="borges de frente" />
        <figcaption id="img-caption">
          Cada 24 de agosto se conmemora el nacimiento de Jorge Luis Borges y se
          celebra el Día del Lector
        </figcaption>
      </figure>

      <!-- Texto -->
      <section id="tribute-info">
        <p>
          Jorge Francisco Isidoro Luis Borges (Buenos Aires, 24 de agosto de
          1899-Ginebra, 14 de junio de 1986) fue un escritor, poeta, ensayista y
          traductor argentino, extensamente considerado una figura clave tanto
          para la literatura en habla hispana como para la literatura universal.
          En homenaje al escritor de cuentos, ensayos y poemas, hoy se conmemora
          el Día del Lector.
        </p>

        <!-- Lista de obras -->
        <h3>Cronología con algunas de las obras más influyentes de Borges</h3>
        <h4><strong>Narrativa</strong></h4>
        <ul>
          <li>1942.- "<i>El jardín de senderos que se bifurcan</i>"</li>
          <li>1944.- "<i>Ficciones</i>"</li>
          <li>1949.- "<i>El Aleph</i>"</li>
          <li>1951.- "<i>La muerte y la brújula</i>"</li>
        </ul>

        <h4><strong>Poesía</strong></h4>
        <ul>
          <li>1923.- "<i>Fervor de Buenos Aires</i>"</li>
          <li>1960.- "<i>El hacedor</i>"</li>
          <li>1969.- "<i>El otro, el mismo</i>"</li>
          <li>1969.- "<i>Elogio de la sombra</i>"</li>
          <li>1972.- "<i>El oro de los tigres</i>"</li>
          <li>1981.- "<i>La cifra</i>"</li>
        </ul>

        <h4><strong>Ensayo</strong></h4>
        <ul>
          <li>1925.- "<i>Inquisiciones</i>"</li>
          <li>1926.- "<i>El tamaño de mi esperanza</i>"</li>
          <li>1928 "<i>El idioma de los argentinos</i>"</li>
          <li>1932.- "<i>Discusión</i>"</li>
          <li>1936.- "<i>Historia de la eternidad</i>"</li>
          <li>1952.- "<i>Otras inquisiciones</i>"</li>
        </ul>
      </section>

      <footer>
        <p>
          Si tenés tiempo, te recomendamos leer más sobre el genial autor
          argentino. Podés empezar por su
          <a
            href="https://es.wikipedia.org/wiki/Jorge_Luis_Borges"
            id="tribute-link"
            target="_blank"
            >página en Wikipedia</a
          >
        </p>
      </footer>
    </main>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
}

body {
  font-family: sans-serif;
  font-size: 1rem;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 6rem;
  margin: 0;
  text-align: center;
}

h2 {
  font-size: 3rem;
  font-family: sans-serif;
  font-weight: 300;
  font-style: italic;
  text-align: center;
}

main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

/* Imagen */

img {
  display: block;
}

#image {
  max-width: 100%;
  height: auto;
  align-items: center;
}

#img-div {
    background-color: white;
    padding: 10px;
    margin: 0;
}

#img-caption {
    font-size: 1.5rem;
    margin: 15px 0 5px 0;
}

Target the parent of the image to center it use flex or grid

3 Likes

¡Bienvenido a la comunidad @nicopetroselli!

Debería ser styles.css en lugar de style.css

Espero que esto te ayude.

¡Feliz codificación!

Welcome to the community @nicopetroselli !

It should be styles.css instead of style.css

I hope this helps you.

Happy coding!

2 Likes

Hey!
Problem solved. Thank you so much!

1 Like

Muchas gracias por la bienvenida y por tu consejo. No noté ese detalle y funcionó perfecto!

Hey, thank you for the welcome and for the tip. I didn’t see that and it worked!

1 Like

¡De nada!

Estaremos encantados de ayudarte en el viaje de la codificación.
¡Sigan con el buen progreso!

You are welcome!Happy to help you along the coding journey.
Keep up the good progress!

1 Like