Tell us what’s happening:
I don’t get how to center my image in it’s parent.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Tribute page fore Daisy Johnson AKA Quake" />
<title id="title">Tribute page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" alt="Marvel logo" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Marvel_Logo.svg">
<h1>Tribute Page <br/>Daisy Johnson AKA "Quake"</h1></div><br/>
</header>
<main id="main">
<fieldset id="info">
<div id="img-div" class="image-container">
<img src="https://oyster.ignimgs.com/wordpress/stg.ign.com/2015/08/Chloe-B-Marvel.jpg" alt="Daisy Johnson AKA Quake" id="image">
<figcaption id="img-caption">Daisy Johnson AKA Quake</figcaption>
</div>
<div class="text-container">
<p id="tribute-info" class="tribute-info"> Daisy is first introduced as a genius hacker. She was raised at Saint Agnes Orphanage and was given the name Mary Sue Poots. Daisy hated this name and created the alias Skye, she hated S.H.I.E.L.D. until she learned what they really stood for. During her time at S.H.I.E.L.D. she learned who her true parents were. Jiaying an inhuman leader who hated humans due to her past, and her human father Calvin Johnson. Daisy learned her true birth name was Daisy Johnson and changed it later in the series.</p>
</div>
</div>
<div>
<a id="tribute-link" class="link" href="https://marvelcinematicuniverse.fandom.com/wiki/Quake" target="_blank" >Click here for more information</a>
</div>
</fieldset>
</main>
<footer></footer>
</body>
</html>
/* file: styles.css */
html{
background-color: #17202a
}
header {
width: 100%;
height: 180px;
background-color: #c0392b;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
background-color: #fbfcfc;
padding: 0.4rem;
display: flex;
flex: wrap;
width: max(10rem, 18vw);
margin-left: 25px;
}
.h1-container:
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
body{
color: #17202a;
}
main{
padding-top: 180px;
background-color: #154360;
color: #ecf0f1;
}
h1{
display: flex;
text-align: center;
font-size: 40px;
padding: 0;
}
img {
float: left;
margin-right: 20px;
max-height: 500px;
max-width: 100%;
}
figcaption{
display: none;
}
.text-container {
margin-left: 20px;
margin-top: 170px;
text-align: center;
float: center;
}
.link{
margin-left: 380px;
color: #f1c40f;
}
a:hover{
cursor: pointer;
background-color: #c0392b;
color: #fbfcfc;
}
Your browser information:
User Agent is: Mozilla/5.0 (Linux; Android 11; KFSNWI) AppleWebKit/537.36 (KHTML, like Gecko) Silk/124.5.1 like Chrome/124.0.6367.248 Safari/537.36
Challenge Information:
Tribute Page - Build a Tribute Page