Stuck at The <img> element should be centered within its parent element

Tell us what’s happening:
I’m attempting to complete the Tribute Page. Somehow I’m stuck at the last checkpoint.

Your code so far
HTML

<style>
  h2{
    font-family: arial;
    font-size: 12px;
  }
</style>

<div id="main">
  
  <h1 id="title">Strength Training Rocks!<h/1>
    
  <h2>
    <figure id="img-div">
    
  <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Man_lifting_a_heavy_barbell.jpg" alt="Man lifting a heavy barbell" width="50%" height="0%">
  
   <figcaption id="img-caption"> Heavy weight training strengthens not only physically, but also mentally.</figcaption> 
    </figure>
    
    <p id="tribute-info"> I'd like to share how strength training has helped to change and improve the quality of my life.</p>
    <ul>
      <li>Improves strength and fitness</li>
      <li>Protects and maintains bone and muscles mass</li>
      <li>Better movement patterns, which can be carried over to real life situations</li>
    </ul>
    <a id="tribute-link" href="https://www.everydayhealth.com/fitness/add-strength-training-to-your-workout.aspx#:~:text=Strength%20training%20%E2%80%94%20also%20known%20as,according%20to%20the%20American%20Heart" target="_blank"></a>
    </h2>
</div>

CSS

#img-caption{
  width: 400px;
}

#image {
  max-width: 100%;
  height: auto;
  display: block;
}

Hi,

To complete the Tribute page, you should create <div> under which there should be an image tag (<img/>) and an image caption tag(i.e a <p/> or <figcaption/> tag.

You should just align the image caption to be in the center and use margin along with your CSS for the image.

I hope this helps.
All the best to complete the task.

1 Like

Hi @nivethakrishnan72 and @anthonyleeyc !

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.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

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