Tribute Page:Your #image should be centered within its parent

HTML-CSS
1

I have tried various ways to center my image but none have worked so far. I’m not sure why what I have in my CSS #image selector is not okay.

  **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 for Reshma Saujani" />
  <title id="title">Reshma Saujani Tribute Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
  <body>
    <main id="main">
<header>
  <h1> Reshma Saujani</h1>
  <h2 id="tribute-info"> A woman dedicated to teaching young women and girls about bravery, not perfection.</h2>
 </header>   
 <div class="image">
  <figure id="img-div">
    <img id="image" src="https://aspenideasfestival.imgix.net/null94510347-3846-4d5a-ba93-042762e12b4d/Saujani_Reshma_REET2021.jpg?auto=compress%2Cformat&fit=min&fm=jpg&h=290&q=80&rect=146%2C97%2C700%2C702&w=290">
    <figcaption id="img-caption">Reshma Saujani is helping to bring more women into the world of tech through her non-profit Girls Who Code.
  </figcaption>
  <figure>
  </div>  
  <ul>
 <li class="bullets">1975: Born in Illinois on November 18th.</li>
  <li class="bullets" >1997: Graduated from the Univerity of Illinois.</li>
  <li class="bullets">1999: Graduated from Harvard's Kennedy School of Government.</li>
  <li class="bullets">2002: Graduated from Yale Law School</li>
  <li class="bullets">2010: Became the first Indian American woman to run for U.S. Congress. While visiting local schools during her campaigne, Reshma became aware of the divide between girls and the technology programs in their schools.</li>
  <li class="bullets">2012: "Girls Who Code" was born. "Girls Who Code is a nonprofit organizatio working to close the gender gap in technology and change the image of what a computer programmer looks like and does.</li>
  <li class="bullets">2013: Authored book "Women Who Don't Wait in Line: Break the Mold, Lead the Way.</li>
  <li class="bullets">2016: TED Talk "Teach Girls Bravery, Not Perfection.</li>
  <li class="bullets">2017: Authored "Girls Who Code: Learn to Code and Change the World".</li>
  <li class="bullets">2019: Authored Brave, Not Perfect.</li>
  <li class="bullets">2022: Authored "Pay Up: The Future of Women and Work".</li>
<p >To learn more about Reshma Saujani and her amazing achievements, go to this <a id="tribute-link" href="https://en.wikipedia.org/wiki/Reshma_Saujani" target="_blank" value="tribute-link">Wikipedia page</a>. 


/* file: styles.css */
*{
font-family: copperplate; 
}
h1{
text-align: center; 
}
h2{
text-align: center; 
font-size: 15px; 
}
***img{***
***display: block;***
***justify-content: center;***
***padding-bottom: 50px; ***
***padding-top: 50px; ***
***width: 100%;***
***max-width: 100%; ***
***min-width: 300px; ***
***max-height: 500px; ***
***}***
*.image{*
*background-color: green; *
*}*
.bullets{
margin: 25px auto; 
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

2

Hello. Be aware I’m not experienced much.
However

you have property

Take a look at MDN:

I believe to use this property, you need flex container.

That means parent element for image should be flex container.

Aslo I am not sure about:

Some width-related props are in pixels, some in percent. But that’s for discussion. I would personally try to avoid this.
EDIT. Or maybe it’s all good about width, I just don’t think if you have width 100%, you don’t need max-width 100%

EDIT2. Also I should ask, for what purpose did you add padding to your #img

3

On this forum it is not considered best practice to give direct solutions, and I just say:
when I did this project, i ended up with 1 or 2 properties for #img selector. To center it you don’t necesariily need complex styling.

4

Figured it out. Thank you!

5

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