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

Hey guys, I am getting: * Your #image should be centered within its parent.

Could someone please be so kind as to point me the right way? I’ve tried everything at this point.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Patriarch Bartholemew</title>
        <link rel="stylesheet" href="./styles.css"
    </head>
    <main id="main">
        <body>
        <h1 id="title">Patriarch Bartholomew</h1>
        <h3>Patriarch Bartholemew I, born Dimitrios Archontonis on February 29, 1940, is the current Archbishop of Constantinople, New Rome, and Ecumenical Patriarch. As the spiritual leader of the Eastern Orthodox Church, he holds a position of great significance within the Christian world. Patriarch Bartholomew is renowned for his commitment to interfaith dialogue, environmental advocacy, and the promotion of religious freedom.

        </h3>
        <div class="img-container" id="img-div">
            <img 
            src="https://www.goarch.org/documents/32058/2160179/ec-pat-bartholomew-portrait-large.jpg/ac22d673-557d-4cd5-88b4-ef3306f9e698?t=1439306910000" 
            alt="Patriarch Bartholemew"
            class="patriarch-image"
            id="image"
            />
            <div class="caption" id="img-caption">
                Patriarch Bartholomew I of Constantinople            </div>
        </div>
    <div class="life">
        <p class="life-header bold">
            Here's a timeline of Patriarch Bartholomew's life:
        </p>
   <ul id="tribute-info">
    <li><span class="bold">1940:</span> Patriarch Bartholomew is born as Dimitrios Arhondonis on February 29 in Imbros (Gökçeada), Turkey.</li>
<li><span class="bold">1961:</span> He enters the Theological School of Halki, Istanbul.</li>
<li><span class="bold">1968:</span> Completes his studies and is ordained a deacon.</li>
<li><span class="bold">1970:</span> Ordained a priest and continues his postgraduate studies in Switzerland.</li>
<li><span class="bold">1972:</span> Receives a doctorate in Canon Law from the University of Munich, Germany.</li>
<li><span class="bold">1973:</span> Returns to Istanbul and serves as an assistant professor at Halki Theological School.</li>
<li><span class="bold">1974:</span> Elected Metropolitan of Philadelphia, serving as the titular head of the Greek Orthodox Archdiocese of America.</li>
<li><span class="bold">1991:</span> Becomes the Metropolitan of Chalcedon, a senior position within the Ecumenical Patriarchate.</li>
<li><span class="bold">1991:</span> On October 22, he is elected as the 270th Ecumenical Patriarch of Constantinople, succeeding Patriarch Demetrios I.</li>
<li><span class="bold">1992:</span> Takes the name Bartholomew I upon his enthronement as Patriarch.</li>
<li><span class="bold">1995:</span> Patriarch Bartholomew issues a historic letter of apology for the wrongs committed by the Church during the Fourth Crusade in 1204.</li>
<li><span class="bold">2006:</span> Attends the inaugural meeting of the Ecumenical Patriarchate Environmental Symposium, highlighting his commitment to environmental issues.</li>
<li><span class="bold">2014:</span> Meets with Pope Francis in Jerusalem, marking a significant step in ecumenical relations between the Orthodox Church and the Roman Catholic Church.</li>
<li><span class="bold">2021:</span> Continues to serve as the Ecumenical Patriarch, advocating for religious freedom, environmental stewardship, and interfaith dialogue.</li>
<li><span class="bold">2023:</span> As of the current year, Patriarch Bartholomew continues his role as the Ecumenical Patriarch and remains influential in global interfaith dialogue and environmental advocacy.</li>
</ul>
   </ul>
   <div class="quote-containter">
    <p class="quote" id="quote">
        "Learning to be silent is far more difficult and far more important than learning to recite prayers."
        <p class="quote-author">
        --Patriarch Bartholomew
    </p>
       </div>
    </div>
    <h3>
        <p class="learn-more">You can learn more about our beloved Ecumenical Patriarch on his</p>
        <a
id="tribute-link"
href="https://en.wikipedia.org/wiki/Bartholomew_I_of_Constantinople"
target="_blank">Wikipedia page</a>
            </h3>
    </main>
    </body>
</html> ```





* {
    padding: 0;
    margin: 0;
}
h1 {
    padding: 20px;
    font-family: Arial;

}
h3 {
    font-size: 20px;
    background-color:rgba(173, 141, 237, 0.603);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

body {
    background-color:wheat;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
}

.img-container {
    max-width: 100%;
       padding: 30px;
    background-color: rgba(181, 152, 80, 0.728);
    

}
.patriarch-image {
    max-width: 100%; 
    border: 30px solid rgba(181, 152, 80, 0.728); 
    display: block;
      height: auto;
  margin: 0 auto;

}

#image-div {
      background: white;
padding: 10px;
    margin: 0 auto;
    

}

.caption {
    padding-top: 5px;
}
    .life {
    margin: 0 auto; 
    padding: 30px 70px;
    max-width: 600px;
    background-color: rgba(220, 220, 220, 0.4);
}
    }

.life-header {
    text-align: center;
    font-size: 20px;  
    font-family: Arial;
    padding: 30px;
}
.bold {
    font-weight: bold;
}
li {
    margin:20px;
}
.quote{
    margin: 30px 30px 5px;
    font-style: italic;
}
.quote-author {
    text-indent: 30px;
}
a {
    color: #99F
}
#tribute-link {
    font-size: 14px; 
}
.learn-more {
    font-size: 14px;
}
.life ul {
    text-align: left;
    padding-left: 20px;
}

Hello!

Try adding to the targeted .image selector.

box-sizing: border-box;

I hope this helps you!

Keep up the great progress! :slight_smile:

1 Like

Sorry it didn’t help

You are missing a closing > on the link tag.

This is centering the #image-div element, not the #image element.

The centering part is correct as he should center his img within his parent

Hi there!
Can you change the image display to flex?
If so, you could try this approach:

.patriarch-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

You could also try this with the image div

He didnt learn flexbox yet. It would be outta range of his knowledge.

Auto margins center the element that they are being applied to, not the children of the element. If you want to use auto margins to center the image then you need to apply them to the image itself, not its parent div.

Thanks bbsmoth. This did it!

1 Like