Tu #image debe estar centrado dentro de su padre

estoy intentando superar la primera práctica de CSS y me he atascado en el último punto:

  • Tu `#imagen debe estar centrado dentro de su padre.

este es mi HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Mr. Jaco Pastorius</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <center>
    <main id="main"> 
    <div id="bg-title">
    <h1 id="title"> Mr. Jaco Pastorius</h1>
    <p id="sub-title"> Un músico sin igual</p>
    </div>
    <div id="img-div">
       <img id="image" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fmediad.publicbroadcasting.net%2Fp%2Fshared%2Fnpr%2Fstyles%2Fx_large%2Fnprshared%2F201511%2F457693959.jpg&f=1&nofb=1" width="600">
      <figcaption id="img-caption">Imagén de Jaco</figcaption>
    </div> 
  <div>
    <center>
    <a id="tribute-link" href="https://es.wikipedia.org/wiki/Jaco_Pastorius" target="_blank">Más información de Jaco Pastorius</a>
    </center>

y este el CSS

.body {
margin: auto;
background-color: #fff;
text-align: center;

}
img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
border: solid;
border-width: 5px;
border-color: #000;
}
#img-div{
background-color: #fff;
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
#bg-title {
background-color: #eee;
padding: 20px 0px 24px 0px;
margin: 12px;
}
#title {
padding: 0px 0px 24px 0px;
font-size: 2rem;
text-align: center;
font-family: Arial, Verdana, sans-serif;
}
#sub-title {
text-align: center;
font-family: Arial, Verdana, sans-serif;
}
#image {
margin: 12px;
max-width: 100%;
height: auto;
display: block;
}
a {
font-family: Arial, Verdana, sans-serif;
}
}
#img-caption {
text-align: center;
}

En pantalla los elementos se ven centrados pero no de la manera que reclama el enunciado…

gracias,

Jaume

Puedes compartir el link del reto?

Hay partes del codigo que afectan el centrado de la imagen

border: solid;
border-width: 10px;
border-color: #000;

y el margen de 12

#image {
margin: 12px;
max-width: 100%;
height: auto;
display: block;
}

Hacen que tu imagen tenga espacio extra del lado izquierdo, aunque aún estoy viendo porque .

También tienes revisa tu código CSS, ya que tienes llaves { } de más

Muchas gracias @franciscomelov, revise el CSS y modifíqué los el margin dejándolo así:

#image {
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 100%;
  height: auto;
  display: block;
}

era eso!

Un saludo y gracias de nuevo,

Jaume
1 Like