How do I center the image?

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>
  <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 id="img-div">
      <img id="image" class="image" src=""/>
    <figcaption id="img-caption" class="caption">Subramanyan Chandrasekhar, from the National Portrait Gallery</figcaption>
      <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>
      <p>Learn more on
      <a id="tribute-link" href="" target="_blank" class="link"> this Wikipedia page!</a></p>
/* file: styles.css */
  font-family: Trebuchet MS;
padding: 20px;
display: block;
width: 400px;
max-width: 100%;
height: auto;
margin-right: auto;
  font-family: Tahoma;
  background-color: #A6A6;
  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/ Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

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 !!

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.

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!

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