Tribute Project - Img not centering within Figure

HTML-CSS
1

Hello all. I’m having some trouble getting my img to center after creating a Figure element around it with a background color. When I remove the Figure - it centers fine, as it should in the flex box.

https://codepen.io/drustin/pen/PvZVaW

2

Try removing width: 98% from #img-div, and adding:

  display: block;
  margin-left: auto;
  margin-right: auto;
2 Likes
3

Dropping the width: 98% entirely fixed the centering issue. Is it possible to have the background of the color of #img-div fill the entire width of the screen. All my attempts led me to the issue I had before with the image not centering. Thanks for your help!

1 Like
4

A bit like this?

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

#img-div {
  width: 100%;
  background-color: #006080;
}

#img-caption {
  font-style: italic;
  margin: auto;
  text-align: center;
}
1 Like
5

Yes exactly! Is there a reason that you had to center the img using margin auto and #img-div using text-align: center? I thought the flex box would of handled that? Does it have something to do with the figure element’s default positioning?

6

@mcalex @Drustin2

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

margin: 0 auto; is shorter

7

Flex display only works on direct children - grandchildren don’t inherit. I had another look and think I achieved the same result with:

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0 25px 0;
}

#img-div {
  width: 100%;
  background-color: #006080;
}

#img-caption {
  font-style: italic;
}

Notice: no: img { ... } css.

8

Seems like a cleaner way of doings things - had to keep

img {
 max-width: 100%; 
}

Otherwise the image gets stretched out to fill the entire screen.