Tribute Page - Image and part of text not centering

Code Feedback
1

Hello, I’m not sure what I’m doing wrong that my second image is not centering so I may pass the tests for the Tribute Page project.

Here’s the work I’ve done so far. I’m also trying to center the “Thomas” text at the bottom of the second image:

Could anyone shed some light on this? Thanks in advance.

2

<p id"image-caption2">Thomas</p>

This is your bottom text html code, you forgot the = after id and

image-caption2 {
  text-align: center;
}

Instead of calling the id, you have just called the name, # symbol is missed

3

Thank you. The “Thomas” text is now centered, however the second image is still not passing the tests.

Depending on how maximized the webpage is on my desktop, the second image floats to the left of the first image. I’m wondering if I’ll be able to pass the centering test if I isolate the second image to where it doesn’t float to the left of the first one. Do you know how I might do that?

4

Yeah, there are many way, first of all, when you float something, then you have to float it’s parent too,
and also all the elements inside it must be floated, else it will affect the shape of the elements.

Whenever an img is used, wrap it with a div and apply the width to that div using min-width and max-width, img can be given a 100% width

When you use float, it creates a lot of pain, rather use flexbox, you can refer here,

1 Like
5

Comment out the img {...} selector in your styling and add this code to your ,

#image {
  height: auto;
  display: block;
  margin: auto;
  max-width: 100%;
}
1 Like