Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here. i am having difficulties with this step- “Your #image should be centered within its parent”.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html LANG="en">
<main id="main">
  <title id="title">Tribute to Mama</title>
  <div id="img-div">
    <image id="image"></image>
    <div id="img-div"></div>
    <figcaption id="img-caption">Mama's Picture</figcaption>
    <tribute id="tribute-info">Tribute to the love of my life.</tribute>
    <a id="tribute-link"target="_blank" href=""></a>
    <link rel="stylesheet"href="styles.css">
  </div>
</main>

/* file: styles.css */
body{margin: 0;padding: 0;box-sizing: border-box;}
main{display: flex col;}
img{display: block;margin-left: 0;margin-right: 0;max-width: 100%;}
figure{width: auto;object-fit: center;align-items: center;}

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

i am having difficulties in centering the image to the parent line.

4

Welcome to the forum @mtmasimula

Your code needs a little tidying up.

  1. The element name for the picture is img.
    These elements are self-closing do not need a closing tag.
    You will need to include an src attribute in the image element.
  1. Delete the opening div tag appearing in the code block below.
    Place the closing div tag below the figcaption element.
    This will group all the image components together.

To center the img in the parent container, you will need to target the styling for the #img-div element.
Hint: a styling property you are looking for will affect the margins

Happy coding

5

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