Tribute Page - imageshould be centered within parent element?

HTML-CSS
1

Tell us what’s happening:

Describe yoi tried margin 0 auto but it still doesn’t work . how do i center img within parent element in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
 <meta name="description" content="Tribute page" />
<link href="styles.css" rel="stylesheet">
    <title>Tribute Page</title>
            <h1>Roman Reigns Tribute page</h1>
     <nav>
        <ul>
          <li><a href="#title">intro</a></li>
          <li ><a href="#championships">career</a></li>
          <li><a href="#conclusion">conclusion</a></li><!--add reference to id in list and make it on the side or add border-->
        </ul>
      </nav>
    </head>
    <body>
      <main id="main">

 <div id="img-div">
   <img src="https://www.kxan.com/wp-content/uploads/sites/40/2023/03/642601b3710d45.90940348.jpeg?w=2560&h=1440&crop=1" alt="roman reigns image" id="image">
   <figcaption id="img-caption">the goat roman reigns</figcaption>
   <p id="title">Leati Joseph Anoaʻi (Samoan pronunciation: [a.noˈaʔ.i] ah-no-AH ee; born May 25, 1985) is an American professional wrestler and former American football player. He is currently signed to WWE, where he performs on the SmackDown brand under the ring name Roman Reigns. He is the current and longest-reigning WWE Universal Champion in his second reign and the current WWE Champion in his fourth reign.[a] He is also the leader of The Bloodline stable and a member of the Anoaʻi family.[4] Reigns's ongoing reign of 1,262 days as Universal Champion is the fourth-longest world title reign in WWE history and the longest championship reign since 1988.
     
   </p>
 </div>

<div id="tribute-info">
 <p id="championships"> Reigns is a six-time world champion in WWE, having held the WWE Championship four times and the WWE Universal Championship twice. He is also a one-time WWE United States Champion, a one-time WWE Intercontinental Champion, a one-time WWE Tag Team Champion (with Rollins), the 2015 Royal Rumble winner, and the 2014 Superstar of the Year. He tied the WWE record for most eliminations in a Survivor Series match with four in the 2013 event and also previously held the record for most eliminations in a Royal Rumble match with 12 in the 2014 event. Upon winning the Intercontinental Championship, he became the 28th Triple Crown Champion and the 17th Grand Slam Champion.</p>
  <div>  <p> He has headlined numerous pay-per-view events, including WWE's flagship event WrestleMania seven times (31, 32, 33, 34, 37, 38, and 39).[9][10] Additionally, he was ranked at No. 1 in Pro Wrestling Illustrated's annual PWI 500 list of the top 500 singles wrestlers in 2016 and 2022.</p></div>
</div>
<div>
  <p id="conclusion">In conclusion Roman Reigns is the Greatest of All Time.</p>
</div>
<div>
     <p>   Click to get more <a href="https://en.wikipedia.org/wiki/Roman_Reigns" value="link" id="tribute-link" target="_blank">info</p>
</div>
      </main>
    </body>
  </html>

/* file: styles.css */
img, figcaption{width:400px;
display:block;
padding-left:250px;
max-width:100%;
height:auto;
margin-left:auto;
margin-right:auto;}

h1{ display:block;
text-align:center;}
p{display:flex;justify-content:center;
padding-left:250px;
width:400px;}
*{font-family:Georgia ;
background-color: ivory;
}
img-div>img{
  margin:0 auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Welcome to the forum @gifi

image

The img element itself is not centered, as it is not a block element.
The error message says you need to center the container element for the #image.

Use the same margin properties.

Happy coding

4

To center the #image element within its parent element, you can use the margin: 0 auto; CSS rule. This sets the left and right margins to automatic, causing the element to be horizontally centered within its parent container. This approach works when the parent element has a defined width and is a block-level element like a <div>.

2 Likes
5

this selector doesn’t look correct, make sure you select the element you want to select

1 Like
6

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