Tribute page project cant center image with parent element

1

I CANT CENTER THE IMAGE WITH PARENT ELEMENT PLEASE HELP

Your code so far HTML

        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


<!DOCTYPE html>
<html>
    <head>
        <title>
          CRISTIANO RONALDO TRIBUTE PAGEV
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="cristiano.css">
        <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet"rel="stylesheet">
    </head>
    <body id="bg">
     <div id="main">
            <h1 id="title">CR7STIANO RONALDO</h1>
         
            <div id="img-div" class="center"  >
                <img src="https://wallpapercave.com/wp/wp5424846.jpg" id="image" alt="cristiano ronaldo dos santos aveiro">
                <div id="img-caption">CRISTIANO RONALDO PORTUGUESE PLAYER AND THE GOAT</div>
                <BR>
                <p id="tribute-info">Cristiano Ronaldo dos Santos Aveiro GOIH ComM (European Portuguese: [kɾiŹƒĖˆtjɐnu ŹÉ”ĖˆnaÉ«du]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Serie A club Juventus and captains the Portugal national team
                     Often considered the best player in the world and widely regarded as one of the greatest players of all time,[note 3] Ronaldo has won five Ballons d'Or[note 4] and four European Golden Shoes, both of which are records for a European player.
                      He has won 29 trophies in his career, including six league titles, five UEFA Champions Leagues, one UEFA European Championship, and one UEFA Nations League.
                      A prolific goalscorer, Ronaldo holds the records for the most goals scored in the UEFA Champions League (128) and the joint-most goals scored in the UEFA European Championship (9). 
                      He has scored over 700 senior career goals for club and country.[11]</p>
                        <br>
                        <a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo" target="_blank" id="tribute-link">CLICK HERE FOR MORE</a>

             

            </div>

          




     </div>





</body>
</html>

CSS:

main{
    font-family: 'Anton',sans-serif;

}
h1{
    background-color: #002851;
    color:white ;
    text-align: center;
}
#image-div{
  background-color: #DBDBDB;
  padding: 30px 10px 10px 50px;
  margin: auto;
  opacity: 0.8;
  text-align: center;

}
#image{
   max-width: 90%;
    display: block;
    height: auto;
   text-align: center;
  align-content:center;


#img-caption{
    font-family: monospace;
  text-align:center;
}
#tribute-info{
    font-family: 'Anton',sans-serif;
}
#bg{
    background-image: url("https://wallpapercave.com/wp/wp2736312.jpg");
}
#tribute-link{
    font-family: sans-serif;
    background-color: teal;
    color: tomato;
}
  .center{
    display:block;
    text-align:center
  }
2

I faced the same problem.

image is an inline element. To center it, you have to make its container display properties into block, not the image itself.

1 Like
3

i dont get it can u explain it

4

can you put your codepen link here?

5

btw review this section
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property

esp this part

This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.
2 Likes
7

You have two problems with your CSS code:
First: You are missing a closing brace after #image block.
Second: You need to add (margin: 0 auto;) instead of (align-content:center;) within #image blockā€¦ as the latter property does not fit well in this context.

1 Like
8

Iā€™ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The ā€œpreformatted textā€ tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like
9

remember that in codepen you need to put in the html box only what you would put inside the body tags, not all that stuff

1 Like
10

I wish we never steered people toward CodePen ā€“ itā€™s literally the only web scratchpad site I know of that has this silly requirement. Granted, at the time there werenā€™t too many alternatives that let you save your work permanently, but thatā€™s no longer the case.

1 Like
11

@chuckadams Itā€™s not a requirement. It accepts a full HTML page just fine, at least it should (both Codepen and the test). It just makes it easier to not have to set up boilerplate HTML.

@KevinKurian7 Your CSS selector is wrong.

You have #image-div in the CSS and #img-div on the element. And as said, you forgot to close the #image selector block.

1 Like
12

I thought codepen ignored the content in <head> tags though, irritating if you have script includes in there. But I could be wrong, doubtful though that is :wink:

1 Like
13

You can use the head to load scripts or fonts or whatever, it (should) work just fine.

14

thank you i got it thanks for the help :slight_smile:

15

You still have the wrong selector in the CSS. You have #image-div it should be #img-div.

Edit: I see you added margin: auto to the image and are now passing all the tests. Good job! But do fix the selector anyway.

16

thank you so much for the tip all of u guys gave me :smiley: :smiley: :smiley:

17

thanks buddy for the help iam new to this stuff :slight_smile:

18

thanks for the tip :100: