How do I center the image?

HTML-CSS
1

Tell us what’s happening:
I don’t understand how to center the image within its parent element. What did I do wrong here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <meta charset="utf-8"/>
  <main id="main">
     <link rel="stylesheet" href="styles.css">
     <div class="stuff">
    <h1 id="title"><strong>Subramanyan Chandrasekhar</strong></h1>
    <p>The incredible astrophysicist</p>
    </div>
    <figure>
    <div id="img-div">
      <img id="image" class="image" src="https://ids.si.edu/ids/deliveryService?id=NPG-9300260C_1"/>
    <figcaption id="img-caption" class="caption">Subramanyan Chandrasekhar, from the National Portrait Gallery</figcaption>
      </figure>
      </div>
      <h3> Here's a timeline of Mr. Chandrasekhar's life:</h3>
      <ul id="tribute-info" class="tribute-info">
        <li><strong>1910:</strong> Born in Punjab, British India in modern-day Pakistan</li>
        <li><strong>1930:</strong> He was awarded a scholarship to pursue graduate studies at Cambridge</li>
        <li><strong> 1933:</strong> Awarded his PHD degree</li>
        <li><strong>1935:</strong> When the idea of a Chandrasekhar limit was presented, the astrophysicist was publicly ridiculed by Sir Eddington, whom he previously considered a mentor</li>
        <li><strong>1936:</strong> Married Lalitha Doraiswamy</li>
        <li><strong>1943:</strong> Worked on Ballistics for the Aberdeen Proving Ground, Maryland during WWII</li>
        <li><strong>1952-1972:</strong> He woas editor of <em>The Astrophysics Journal</em></li> 
        <li><strong>1983:</strong> He was awarded the Nobel Prize for his studies on physical processes important to the structure of stars</li>
        <li><strong>1995:</strong>He sadly passed away at the age of 84</li>
      </ul>
      <p>Learn more on
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Subrahmanyan_Chandrasekhar" target="_blank" class="link"> this Wikipedia page!</a></p>
  </main>
</html>

/* file: styles.css */
.stuff{
  background-color:#A6A6;
  font-family: Trebuchet MS;
}
.image{
padding: 20px;
background-color:#A6A6AC;
display: block;
width: 400px;
max-width: 100%;
height: auto;
margin-left:auto;
margin-right: auto;
}
.caption{
  font-family: Tahoma;
  background-color: #A6A6;
}
h3{
  font-family: Trebuchet MS;
}
.link {
  font-family: Trebuchet MS;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14989.107.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

hi there,
can’t help with centering. i copied your code and to me the img looks centered.
But nevertheless i found a typo.
You wrote he woas editor…, instead of " was an editor" or “was editor”.

Interesting person, iguess. thx for info about him.
Good luck with the centering stuff !!

3

hi there again,
if you meant the frame of the picture.( little less on the left side), this is not code, that belongs to the picture.

4

I meant that the test says to center the image within the parent element, not the frame of the picture. Thanks for the advice though!

6

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