How to position image in the center withins its parent element?

HTML-CSS
1

Hi, I’m currently doing the first project on HTML/CSS — Tribute Page.

Questions:

  1. Can somebody explain to me why should I use display: block; in img? I only know to put block as it’s stated inside the tests error. (In the course I’ve only learned display: flex & display: grid
  2. Without giving me the answer, maybe by hints. How do I make the image be centered? I tried using align-items: center (so that the flex items are centered along the cross axis) but it doesn’t seem to work.

HTML CODE:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <header></header>
    
    <main id="main">
      <h1 id="title">Dr. Norman Borlaug</h1>
      
      <div id="img-div">
        <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="">
        <p id="img-caption">Dr. Norman Borlaug, third from the left, trains biologistin Mexico on how to increase wheat yields - part of his life-long war hunger.</p>
      </div>
      <h2 id="tribute-info">Here's a timeline of Dr. Borlaug's life:</h2>
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank"></a>
    </main>
    
    <footer></footer
      
  </body>
</html>

CSS Code:

img {
  display: block;
  max-width: 100%;
  height: auto; 
}

#img-div {
  display: flex;
  align-items: center;
}
2

It’s not usually neccessary to display an image as block, not sure why the project is making you do that without seeing the details.
An image can be centered several different ways such as margin:auto;,
if using flexbox you would usually justify-content/items center which works left to right axis and align works top to bottom unless you have changed flex direction to column which reverses things. There is also place items center which works on both axis though doesn’t always seem work, it’s good when it does.
A little trial and error sometimes

1 Like
3

CSS: centering things (w3.org)

there`s one :slight_smile:

place-content:center;

1 Like
4

Thanks for the tip @Jaydog on the flex direction :smiley:

I’ve tried the code below without display: block; in the img and it work!

  max-width: 100%;
  height: auto;
}

#img-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@zaklina I tried googling for position-content property but found nothing. I tried testing it but it didn’t work. Maybe I did it wrongly but thanks though. I’ll have to look up more about this

2 Likes
5

sorry it`s thime to go to sleep: :rofl:

position:absolute;
place-content: center

6

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