Tribute Page Project

HTML-CSS
1

i need help to center my image within its parent. I’m not sure what i did wrong. I hope i submit the post correctly.

<!DOCTYPE html>
<html lang="en">
  <head>
<meata charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tribute Page of MLK</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<main id="main">
  <h1 id="title">Dr. Martin Luther King Jr.</h1>
  <p id="sub-title">Americas Baptist Minister, Activist, and Politcal Philopsher
  </p>
  <p id="Birth-Death"><strong>January 15, 1929 - April 4, 1968</strong></p>
<div id="img-div">
  <figure>
    <img src="https://assets.editorial.aetnd.com/uploads/2009/11/hero-crop-gettyimages-459534214.jpg" alt="Martin Luther King Jr." max-width="100%" height="500px" id="image">
    <figcaption id="img-caption">Dr. Martin Luther King Jr. gave his speech, "I Have a Dream", at the Lincoln Memorial in Washingtion, DC., on August 28, 1963.</figcaption>
  </figure>
</div>


```figure{
  margin: 0 auto;
}
img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 20px;
  border: 0;
}


figcaption{
  font-size: 15px;
  text-align: center;
}
2

Nevermind, I figure it out. :laughing:

1 Like