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