Tribute Page: Build a tribute page

Hello, I’m trying to center my img element within its parent but I’m not really sure how to. I am new to coding so please go easy on me.

<!DOCTYPE html>
<html lang ="en"></html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
   <body>
    <main id="main">
      <h1 id="title">Ada Lovelace</h2>
        <p>The first computer programmer</p>
          <div id="img-div" for="header">
            <img for="header" id="image" src="https://daily.jstor.org/wp-content/uploads/2019/10/ada_lovelace_pioneer_1050x700.jpg" alt="A portrait of Ada Lovelace, circa 1840" class="center">
              <figcaption id="img-caption">
         Ada Lovelace wrote extensive notes on the world’s first computer. Her innovations foreshadowed those used in twentieth-century PCs.
              </figcaption>
          </div>
          <h2 id="tribute-info">Here is a timeline of Ada Lovelace's life</h2>
        <ul>
            <li><b>Dec 10, 1815</b>: Born in London England under the name Augusta Ada Byron. Her father was famous poet, Lord Byron and her mother was Anne Isabella Byron</li>
            <li><b>1828</b>: Wrote her first book, <i>Flyology</i> at the age of 12 </li>
            <li><b>Jun 5, 1833</b>: Ada is introduced to Charles Babbage, who is considered the founding father of the computer. He invented the Difference engine able to perform simple calculations. </li>
            <li><b>Jul 8, 1835</b>:At 19, Ada marries William King</li>
            <li><b>May 12, 1836</b>: Ada's first child, Byron is born</li>
            <li><b>Sep 22, 1837</b>: Anne, daughter of Ada and William, is born</li>
            <li><b>Jul 2, 1839</b>: Ada's third and final child, Raplh is born</li>
            <li><b>1841</b>: Ada returns to work. She is tasked with translating a lecture performed by Charles Babbage into English. The lecture is about Babbage's Analytical Engine, an improvement on his Difference Engine.</li>
            <li><b>1843</b>: Ada finishes her translation of Babbage's lecture with the addition of her own notes. Her notes became even more important than the lecture and are categorized from A to G, with <i>Note G</i> being the most famous. This work caused many to accredit Ada Lovelace with being the world's first computer programmer.</li>
            <li><b>1844</b>: Ada struggles with addiction after her doctor prescribed her laudanum, a combination of alcohol and opium for sickness. She also took up a horse gambling habit.</li>
            <li><b>1851</b>: At age 35, Ada is diagnosed with uterine cancer. This caused her to become extremely ill.</li>
            <li><b>Nov 26, 1852</b>: Ada Lovelace passes away at the age of 36.</li>
            <p> "Mathematical science shows what is. It is the language of unseen relations between things. But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious." -Ada Lovelace</p>
            For more detailed information about Ada Lovelace's life, click <a id="tribute-link" href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank"> here </a>
    </main>
   </body>

h1 {
  text-align: center;
  font-size: 45px;
  font-family: verdana;
}

h2 {
  text-align: center;
  font-size: 25px;
  font-family: verdana;
}

body {
  background-color: #CBC3E3;
}

p {
  text-align: center;
  font-size: 18px;
  font-family: verdana;
}

img {
  height: auto;
  width: 50%; 
  margin-right: auto;
  margin-left: auto;
  display: block;
  background: white;
  padding: 13px;
  margin: 0;
  max-width: 100%;
}

div {
  display: flex;
  justify-content: center; 
  align-items: center;
}

figcaption {
  text-align: center;            font-family:verdana;
  font-size: 13.5px;
}

li {
  Text-align: left;
  line-height: 2;
  padding-top: 4px;
  padding-bottom: 5px;
  font-familty: verdana; 
}

@shaniac20 please paste the markup (HTML) as code like this:

```
HTML code
```

<!DOCTYPE html>
<html lang ="en"></html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
   <body>
    <main id="main">
      <h1 id="title">Ada Lovelace</h2>
        <p>The first computer programmer</p>
          <div id="img-div" for="header">
            <img for="header" id="image" src="https://daily.jstor.org/wp-content/uploads/2019/10/ada_lovelace_pioneer_1050x700.jpg" alt="A portrait of Ada Lovelace, circa 1840" class="center">
              <figcaption id="img-caption">
         Ada Lovelace wrote extensive notes on the world’s first computer. Her innovations foreshadowed those used in twentieth-century PCs.
              </figcaption>
          </div>
          <h2 id="tribute-info">Here is a timeline of Ada Lovelace's life</h2>
        <ul>
            <li><b>Dec 10, 1815</b>: Born in London England under the name Augusta Ada Byron. Her father was famous poet, Lord Byron and her mother was Anne Isabella Byron</li>
            <li><b>1828</b>: Wrote her first book, <i>Flyology</i> at the age of 12 </li>
            <li><b>Jun 5, 1833</b>: Ada is introduced to Charles Babbage, who is considered the founding father of the computer. He invented the Difference engine able to perform simple calculations. </li>
            <li><b>Jul 8, 1835</b>:At 19, Ada marries William King</li>
            <li><b>May 12, 1836</b>: Ada's first child, Byron is born</li>
            <li><b>Sep 22, 1837</b>: Anne, daughter of Ada and William, is born</li>
            <li><b>Jul 2, 1839</b>: Ada's third and final child, Raplh is born</li>
            <li><b>1841</b>: Ada returns to work. She is tasked with translating a lecture performed by Charles Babbage into English. The lecture is about Babbage's Analytical Engine, an improvement on his Difference Engine.</li>
            <li><b>1843</b>: Ada finishes her translation of Babbage's lecture with the addition of her own notes. Her notes became even more important than the lecture and are categorized from A to G, with <i>Note G</i> being the most famous. This work caused many to accredit Ada Lovelace with being the world's first computer programmer.</li>
            <li><b>1844</b>: Ada struggles with addiction after her doctor prescribed her laudanum, a combination of alcohol and opium for sickness. She also took up a horse gambling habit.</li>
            <li><b>1851</b>: At age 35, Ada is diagnosed with uterine cancer. This caused her to become extremely ill.</li>
            <li><b>Nov 26, 1852</b>: Ada Lovelace passes away at the age of 36.</li>
            <p> "Mathematical science shows what is. It is the language of unseen relations between things. But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious." -Ada Lovelace</p>
            For more detailed information about Ada Lovelace's life, click <a id="tribute-link" href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank"> here </a>
    </main>
   </body>

@shaniac20 what is your replit username? So, that I could send you an invite on a replit project to highlight the opportunities of your current project.

P.S. Never mind this.

List of things to check:

  1. The HTML structure
<!DOCTYPE html>
<html lang="en">
   <head>
   ...
   </head>
   <body>
   ...
   </body>
</html>
  1. Unnecessary HTML attributes
<div id="img-div" for="header">
            <img for="header" id="image"  ...
  1. Redundant/unnecessary CSS properties
img {
  height: auto;
  width: 50%; 
  margin-right: auto;
  margin-left: auto;
  display: block;
  background: white;
  padding: 13px;
  margin: 0;
  max-width: 100%;
}
  1. Misspelled properties in a CSS style rule.
li {
  Text-align: left;
  line-height: 2;
  padding-top: 4px;
  padding-bottom: 5px;
  font-familty: verdana; 
}
div {
  display: flex;
  justify-content: center; 
  align-items: center;
}

Since you are using flexbox here, it is a lot efficient to center those elements. Just add the flex-direction property and set it to column – the default is row. Then it should center the items (elements) inside your div flexbox container.

1 Like

Thank you for your feedback! I will go back and do some editing.

1 Like

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