Your #image should be centered within its parent

HTML-CSS
1

Tribute Page Issue

Good day,
I am trying to complete my tribute page certification, but I get the error:

Your #image should be centered within its parent.

However, my image is definitely centred. How can I modify my code to pass this test?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Steve Jobs Tribute</title>
</head>
<body>
    <main id="main">
        <figure id="img-div"><img id="image" src="https://www.maclife.de/media/maclife/styles/tec_frontend_fullscreen/public/images/editors/2015_17/image-64912--96241.jpg?itok=dx_kgkZ6" alt="Young Steve Jobs" title="Young Steve Jobs"><span id="caption"><figcaption id="img-caption">Steve Jobs when he was young</figcaption></span></figure>
        <h1 id="title">Steve Jobs</h1>
        <h2>The man that revolutionized the tech industry, and changed the world forever</h2>
        <p id="tribute-info">Steven Paul Jobs (February 24, 1955 – October 5, 2011) was an American entrepreneur, industrial designer, business magnate, media proprietor, and investor. He was the co-founder, the chairman, and CEO of Apple; the chairman and majority shareholder of Pixar; a member of The Walt Disney Company's board of directors following its acquisition of Pixar; and the founder, chairman, and CEO of NeXT. He is widely recognized as a pioneer of the personal computer revolution of the 1970s and 1980s, along with his early business partner and fellow Apple co-founder Steve Wozniak.</p>
        <div id="quote"><p id="quote-text"><em>“The people who are crazy enough to think they can change the world are the ones who do.” - Steve Jobs</em></p></div>
        <div id="learn-more"><p id="learn-more-text">To learn more about Steve Jobs, see his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Steve_Jobs" target="_blank">Wikipedia page</a></p></div>
    </main>
</body>
</html>

CSS:

body {
    font-family: sans-serif;
    margin: 0;
}

#main {
    width: auto;
    height: 97vh;
    background-color: lightgrey;
    border: 2px solid white;
    border-radius: 8px;
    padding: 10px;
}

#image {
    max-width: 100%;
    max-height: 798px;
    min-width: 300px;
    width: 40%;
    margin: 1rem auto;
    display: block;
    border: 3px solid white;
}

#caption {
    text-align: center;
}

h1, h2, p {
    margin: 10px;
}

h2 {
    margin-bottom: 20px;
}

#quote {
    background-color: white;
    border-radius: 6px;
    height: auto;
    width: 90%;
    display: flex;
    margin: 25px auto;
}

#quote-text {
    text-align: center;
    vertical-align: middle;
    margin: 10px auto;
}

#learn-more {
    height: auto;
    display: flex;
    margin: 25px auto;
    /*background-color: blue;*/
}

#learn-more-text {
    text-align: center;
    margin: 10px auto;
}

.empty {
    height: 10px;
}

Thanks in advance!
Matthew

2

try to set height and width for the #img-div element

1 Like
3

I tried adding

#img-div {
    margin: 0 auto;
}

to my CSS but this did not solve the issue. Combined with this I also tried removing the image border and changing the margin from 1rem auto to 0 auto ; this also did not work.

4

w3 center image

w3 center elements

5

My image is centered!

6

did you copy some of the code you think will help your code?

7

could you send a link to the challenge you are on

8

Sure, here is the link to the challenge: https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page

I did not copy code from W3, as my image is centered using conventional methods that likely will be shown in the article. I suspect that this is just a small glitch and should be relatively easy to fix.

9

for your styles:

add a #image selector then the two {} brackets, add display set to block, max-width set to
100%, height set to auto, margin-left set to auto, and margin-right set to auto,

10

that’s nor height nor width

11

As can be seen in my initial post there is already an image selector, with display and max-width already set to your suggestions. I tried adding height and margin left/right but unfortunately does not solve the issue.

12

Hi Ilenia, not sure what you mean with this reply?

Issue is still not resolved unfortunately.

13

try setting the hegith and width of the element that contains the image. You said you tried to set the margin, that’s not setting nor height nor width

14

I tried adding

width: 100%;
height: 250px;

to my #img-div element, which is the parent. The test still does not pass.

15

can you post again full css and html? let’s investigate

16

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Steve Jobs Tribute</title>
</head>
<body>
    <main id="main">
        <figure id="img-div"><img id="image" src="https://www.maclife.de/media/maclife/styles/tec_frontend_fullscreen/public/images/editors/2015_17/image-64912--96241.jpg?itok=dx_kgkZ6" alt="Young Steve Jobs" title="Young Steve Jobs"><span id="caption"><figcaption id="img-caption">Steve Jobs when he was young</figcaption></span></figure>
        <h1 id="title">Steve Jobs</h1>
        <h2>The man that revolutionized the tech industry, and changed the world forever</h2>
        <p id="tribute-info">Steven Paul Jobs (February 24, 1955 – October 5, 2011) was an American entrepreneur, industrial designer, business magnate, media proprietor, and investor. He was the co-founder, the chairman, and CEO of Apple; the chairman and majority shareholder of Pixar; a member of The Walt Disney Company's board of directors following its acquisition of Pixar; and the founder, chairman, and CEO of NeXT. He is widely recognized as a pioneer of the personal computer revolution of the 1970s and 1980s, along with his early business partner and fellow Apple co-founder Steve Wozniak.</p>
        <div id="quote"><p id="quote-text"><em>“The people who are crazy enough to think they can change the world are the ones who do.” - Steve Jobs</em></p></div>
        <div id="learn-more"><p id="learn-more-text">To learn more about Steve Jobs, see his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Steve_Jobs" target="_blank">Wikipedia page</a></p></div>
    </main>
</body>
</html>

CSS:

body {
    font-family: sans-serif;
    margin: 0;
}

#main {
    width: auto;
    height: 97vh;
    background-color: lightgrey;
    border: 2px solid white;
    border-radius: 8px;
    padding: 10px;
}

#img-div {
    margin: 0 auto;
    width: 100%;
    height: 250px;
}

#image {
    max-width: 100%;
    max-height: 798px;
    min-width: 300px;
    width: 40%;
    margin: 0 auto;
    display: block;
    border: 3px solid white;
}

#caption {
    text-align: center;
}

h1, h2, p {
    margin: 10px;
}

h2 {
    margin-bottom: 20px;
}

#quote {
    background-color: white;
    border-radius: 6px;
    height: auto;
    width: 90%;
    display: flex;
    margin: 25px auto;
}

#quote-text {
    text-align: center;
    vertical-align: middle;
    margin: 10px auto;
}

#learn-more {
    height: auto;
    display: flex;
    margin: 25px auto;
    /*background-color: blue;*/
}

#learn-more-text {
    text-align: center;
    margin: 10px auto;
}

.empty {
    height: 10px;
}

Thanks for the help.

17

For next time, please, when you ask for help, also include a link to the challenge/step/project please

I honestly don’t know why it doesn’t pass, it should, even looking at the tests themselves it should…

18

I did post the link as a reply to Jasper, here it is: https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page

And I also think it should pass, that’s the reason for my forum post. There are actually many steps in the course that don’t pass when I know for a fact they should, this is however the first certification project I’ve had an issue with.

19

I only know of three steps and only if you use Safari.

This project appear now and then instead as problematic since being migrated from the test suite, it’s not news.

image

like this it passes… min-width and width on their own make it fail. Even with margin there it fails. border and max-height don’t seem to interfere.

20

The many steps I mean in other projects, very often simple steps like adding a div don’t pass so I need to skip them. When I am done with the course I will compile a list.
Thanks for the feedback - I will try it later today and let you know if it works. I also use Safari so will try a different browser too.