Tribute Page - Image centering

HTML-CSS
1

Tell us what’s happening:

I reviewed my code multiple times but I really can’t figure why this image is not centered within the img-div element, can someone help me with this please ?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <main id="main">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Tribute page for freecodecamp class">
      <link rel="stylesheet" href="styles.css">
      <title id="title">Dr Norman tribute page</title>
    </head>

    <div id="img-div">
      
      <div id="img-caption">
        <h1 id="img-precaption">Dr. Norman Borlaug</h1>
        <p id="caption">The man who saved 12 lives</p>
      </div>
      <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg">
      <p id="legend">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.</p>

    </div>

    <div id="tribute-info">
      <h3>Some more infos</h3>
      <ul>
<li><strong>1914</strong> - Born in Cresco, Iowa </li>
<li><strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology</li>
<li><strong>1945</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat.</li>
<li><strong>1967</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
<li><strong>2000</strong> - dies at the age of 95.</li></ul>

<blockquote>
          <p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."
          </p>
          <cite>-- Indian Prime Minister Manmohan Singh</cite>
</blockquote>
    </div>
    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Learn more here</a>
  </main>

/* file: styles.css */
#main{background-color:#EEEEEE;
font-family:helvetica;
border-radius: 5px;}

p,h1,h3{text-align:center;}

li{text-align:left;
padding:1%;}
ul{margin:auto 10% auto 10%;}

#img-div{padding:20px;}

#image{
display:block;
padding:20px;
background-color:white;
max-width:100%;
height:auto;
margin:auto;
}

#legend{
font-style:italic}

a{text-align:right;
display:block;
text-decoration:none;
padding:5px 10px 5px 5px;
color:blue;}
a:visited{color:black;}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

What do you mean be centered?
When I enlargen the page size the image seems to be sitting in the center.
Can you provide more detail, sorry.

1 Like
3

Looks like it is the padding on the image.

You can add box-sizing: border-box

* {
  box-sizing: border-box;
}

You can increase the padding on the parent instead of having two.

You can move the background color as well, but it won’t look the same.

2 Likes
4

It worked perfectly fine thanks a lot

1 Like
5

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