Pls how can I center my img element within its parent element?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<main id="main">
<h1 id="title">Dr. Norman Borlaug</h1>
<div id="img-div"><link rel="stylesheet" href="styles.css"><img id="image"><figcaption id="img-caption">The man who saved a billion lives</caption></img></div>
<div id="tribute-info">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger</div>
<a id="tribute-link" target="_blank" href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"></div>
</main>
<style>
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* 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/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37

Challenge: Build a Tribute Page

Link to the challenge:

2

Hey Kintoh,
I can see many mistakes in your code, I would like to mention them first before answering your question.

  1. Don’t use the link tag in the body, it may only appear in the <head> section of a document, although it may appear any number of times.

  2. Image tag is a self-closing tag, like this <img/>.
    Don’t use a closing img tag.

  3. You are using figcaption without using figure as it’s parent tag.
    Permitted parent element for figcaption is A <figure> element; the <figcaption> element must be its first or last child.

    Change your <div id="img-div"> to <figure id="img-div">

    Also you are using </caption> closing tag for <figcaption> opening tag, instead of </figcaption>

Now the answer to your question:
To horizontally center the img element, give it

margin-left: auto;
margin-right: auto;

Corrected Code:

<main id="main">

  <h1 id="title">Dr. Norman Borlaug</h1>

  <figure id="img-div">
    <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"/>
    <figcaption id="img-caption">The man who saved a billion lives</figcaption>
  </figure>

  <div id="tribute-info">
    Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger
  </div>

  <a id="tribute-link" target="_blank" href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"></a>

</main>
3

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