Tell us what’s happening:
How do I center the image inside of the parent? I’ve tried using display: flex, align-items: center, and justify-content: center, but nothing is working.
Your code so far
<!-- file: index.html -->
<main id="main">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey Form</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<p style="background-image: url('https://wallup.net/wp-content/uploads/2016/05/24/143433-nature-Pokemon-748x468.jpg');"></p>
<title id="title">Ash Ketchum</title>
<div>
<h1 class="ash">Ash Ketchum</h1>
<p class="kid">The kid who wanted to catch 'em all</p>
</div>
<div id="img-div" class="img-div">
<img src="https://otakukart.com/wp-content/uploads/2022/05/who-is-ash-featured.jpg" id="image"/>
<div id="img-caption" class="img-caption">Ash Ketchum with his very first Pokemon, Pikachu</div>
</div>
<div id="tribute-info">
<ul>
<li>Won a Pokemon League Torament in Alola</li>
<li>Conquered the Battle Frontier</li>
<li>Defeated a Darkai and a Latios</li>
<li>Defeated Drake and won the Orange League</li>
<li>Reached the finals in the Kalos Pokemon League</li>
<li>Collected a large number of badges from many regions</li>
<li>Defeated his rival, Paul</li>
<li>Defeated his rival, Gary</li>
<li>Raised a team worthy of a Pokemon Master</li>
<li>Won the Hearthome Tag Team Battle with Paul</li>
</ul>
</div>
<blockquote cite="https://nintendo.fandom.com/wiki/Ash_Ketchum/quotes">
<p>"Do you know who I am? I'm Ash, from the town of Pallet. I'm destined to be the world's number one Pokémon master! I can't be defeated by the likes of you. I'm going to capture and defeat you all!"</p>
<cite>-- Ash Ketchum</cite>
</blockquote>
<h3>If you would like to learn more about Ash and his journey, check out his <a id="tribute-link" target="_blank" href="https://pokemon.fandom.com/wiki/Ash_Ketchum">Wiki page</a></h3>
</html>
</main>
/* file: styles.css */
body {
line-height: 1.5;
text-align: center;
color: white;
margin: 0;
background-image: url("https://wallup.net/wp-content/uploads/2016/05/24/143433-nature-Pokemon-748x468.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
main {
padding-bottom: 75px;
padding-top: 50px;
}
blockquote {
font-style: italic;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
max-width: 545px;
margin: 0 auto 50px auto;
text-align: left;
padding-top: 70px;
padding-bottom: 0;
margin-bottom:0;
}
img {
height: 100%;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
width: 70%;
border-radius: 50px;;
max-width: 100%;
min-width: 370px;
justify-content: center;
align-items: center;
}
@media (max-width: 460px) {
h1 {
font-size: calc(3.5rem+1vw);
line-height: 1.2;
}
}
figure {
padding-top: 20px;
margin: auto;
}
.img-caption {
font-size: calc(6px+1vw);
white-space: nowrap;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
padding-bottom: 70px;
padding-top: 5px;
}
.img-div{
display: flex;
display: inline;
}
.ash, .kid {
text-align: center;
margin: 0;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.kid {
padding-bottom: 10px;
}
div {
text-align: left;
}
ul {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
min-width: 329px;
margin: 0 auto;
text-align: left;
line-height: 1.6;
display: table;
background-color: rgba(0,0,0,.5);
}
li {
margin: 16px 0;
}
h3 {
padding-top: 50px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
a {
color: white;
text-decoration: none;
}
a:hover
{
color: pink;
}
a:active {
color:pink;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: