Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
How can i center my image within its parent in html code?

Your code so far

<!-- file: index.html -->
<main id="main">
  <link rel="stylesheet" href="styles.css">
  <h1 id="title">Ajayi Isaac Opeyemi</h1>
  <div id="img-div">
    <img id="image"></img>
    <div id="img-caption">Tribute To My Husband</div>
  </div>
  <p id="tribute-info">Life is sweeter when you marry your best friend. I will always be greatful I married mine.
    it's been over a decade on this journey. look at us waxing stronger as the years pass by. No regrets.
  </p>
  <a href="https://web.facebook.com/photo/?fbid=10214491603897938&set=pob.1591914024" id="tribute-link" target="_blank"></a>
  <style>
    img{display: block;}
    #image{max-width: 100%;
    height: auto;}
<div>
   #image {text-align: center;
   display: flex;
   justify-content: center;}</div>
  </style>
</main>

/* file: styles.css */

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Wrap the image in a div element.
Set the display property to “flex,” which tells the browser that the div is the parent container and the image is a flex item.
Set the justify-content property to “center.”
Set the width of the image to a fixed length value.

1 Like
3

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