Tribute Page: Image Not Centered Within The Parent Element

HTML-CSS
1

Do not read this Topic if you have not finished Tribute Page (one of the certifications projects) yet! I am sharing solutions to some of the tests!

Hello,

I am making a tribute page, one of the certifications projects.

My code passes the tests but I am not satisfied with the final result; whenever the viewport is narrower than 600px, the <img> element stops being centered within the parent <figure> element.

This is the HTML:

<figure id="img-div">
  <img id="image" src="https://i.ibb.co/JkVWg7B/Ada-Lovelace-in-1852.jpg"/> 
  <figcaption id="img-caption">Ada Lovelace in 1852, the year of her death, at the age of 36.</figcaption>
</figure>

and this is the CSS:

figure {
  margin: 2em auto;
  padding: 2em;
  max-width: 80%;
  background-color: #f0f0f0;
  border-radius: 10px;
}

img {
 display: block;
 margin: 0 auto;
 padding: 1em;
 max-width: 100%;
 height: auto;
}

figcaption {
  font-size: 14px;
}

If the viewport gets below 600px of width there is a bigger padding on the right of the <figure> element, pushing the <img> element to the left. Why?

2

Remove the padding from the image. Use the container to create the space.

2 Likes
3

Yes, it was the padding!
Would you mind explaining to me why did the padding push the image to the left?

1 Like
4

I think it is basically just overflowing the container padding. If you keep the padding on the image but remove it from the figure element you can see the image element overflowing the container.

On the left side, the padding is “container + element” padding, but on the right side, it is only the element padding (after the point of overflow). This also seems somewhat related to how the browser scales down an image as well (like the transform-origin of the scale).

1 Like
5

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