Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have an issue on the last part of it where it says that my img element should be centered within its parent element. I’m not sure what I need to add
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css"></link>
  <title id="title">SpongeBob Squarepants</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <main id="main">
    <header id="title">
      <h1>SpongeBob SquarePants</h1>
      <h3>An animated character that made history</h3>
      </header>
      <figure id="img-div">
        <img id="image" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/1024px-SpongeBob_SquarePants_character.svg.png">
 <figcaption id="img-caption">A photo of SpongeBob</figcaption>
 </figure>
 <section id="tribute-info">
   <h3>A few stuff about this amazing character:</h3> 
   <ul>
     <li>He first appeared on May 1st of 1999 by Stephen Hillenburg</li>
       <li>His Birth Date is July 14, 1986</li>
       <li>He was named one of the "100 Greatest Characters of the Last 20 Years"by Entertainment Weekly
         </section>
         <a target="_blank" id="tribute-link" href="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/1024px-SpongeBob_SquarePants_character.svg.png"></a>
    </main>
  </body>

/* file: styles.css */
body {margin:0;
      padding:0;
      box-sizing:border-box;}
 main {width:60%;
margin:5% auto;
background-color:#eeeee6;
border-radius:5px;
display:flex col; 
padding-top:30px;padding-bottom:30px; margin-top:5px;
margin-bottom:5px;}     
h1 {padding-top:5px;
padding-bottom:5px;
text-align:center;}
figure{width:auto;
display:flex col;
align-items:center;background-color:bbad3f;
padding:0;
object-fit:cover; 
}
img {padding:5px;
display:block;
margin-left:0;
margin-right:0;
max-width:100%;
justify-content:center;
 }

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

there’s no such thing as
display: flex col;

only display:flex;

can you tell what this line does
object-fit: cover;
in figure?

here you tried various ways

img {
  padding: 5px;
  display: block;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  justify-content: center;
}```

can you tell when does justify-content work?
3

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