Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

In my css I’m trying to center the image inside the div. I thought my code was correct. What am I doing wrong?

Your code so far

<!-- file: index.html -->
<main id="main">
  <title id="title">Dr. Norman Borlaug</title>
  <link rel="stylesheet" href="styles.css">
  <div id="img-div">
    <img id="image" src="pic_trulli.jpg" alt="Italian Trulli"></img>
    <figcaption id="img-caption">Image Caption</figcaption>
    <p id="tribute-info">Tribute Info</p>
    <a href="www.href.com" id="tribute-link" target="_blank"></a>
  </div>
</main>

/* file: styles.css */
img{
  display:block;
}

#image{
  max-width:100%;
  height:auto;
  text-align:center;
}

#img-div > img{      text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Challenge Information:

Tribute Page - Build a Tribute Page

2

You need margin property to center a element. You should use margin property value to 0 auto.
@Jimmieperr11

3

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