Tribute Page - Build a Tribute Page - Center Image Inside of Parent

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">
		<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"/>
    <p style="background-image: url('');"></p>
    <title id="title">Ash Ketchum</title>
        <h1 class="ash">Ash Ketchum</h1>
        <p class="kid">The kid who wanted to catch 'em all</p>
    <div id="img-div" class="img-div"> 
        <img src="" id="image"/>
        <div id="img-caption" class="img-caption">Ash Ketchum with his very first Pokemon, Pikachu</div>
    <div id="tribute-info">
            <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>
    <blockquote cite="">
        <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>
     <h3>If you would like to learn more about Ash and his journey, check out his <a id="tribute-link" target="_blank" href="">Wiki page</a></h3>
/* file: styles.css */
body {
  line-height: 1.5;
  text-align: center;
  color: white;
  margin: 0;
  background-image: url("");
  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;

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;

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;
  color: pink;
a:active {


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:

Don’t use pixels as your min width. This will throw off centering on smaller screens.
You can use a relative unit value like % or rem for eg.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.