Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
I am stuck on the requirement to have, " # image should be centered within its parent". I have the image descended from the figure. If I try to change the display for the parent, # img-div or figure to flex and text align center, it throws my caption to the right side of my image and pushed my image to the left. My code is pasted below to what I have currently that keeps my image centered and the caption below the image. Despite this it says I have to have the image centered within its parent.

I’ve tried setting the display, text align for figure, # img-div etc. but no matter the iteration, it does not pass. I am missing something probably pretty obvious. If you could point me in the right direction, I would greatly appreciate it.

Posted below is both a section my html code and style sheet that is pertinent.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<main id="main">
      <figure id="img-div">
        <img src="https://storage.googleapis.com/wzukusers/user-13573728/images/5c39309e378f61sf9HnZ/HIMB.jpg" id="image" alt="Dr. Ruth Gates seen in her coral lab with a confocal microscope and computer monitor with a flourescent coral image behind her"
        />
        <figcaption id="img-caption">Dr. Ruth Gates in her coral laboratory at the Hawaii Institute of Marine Biology. Photo via Gates Coral Lab.
        </figcaption>
      </figure>
        <section id="tribute-info">
         

figure{
  display: block;
  text-align: center;
}

img{
  background-size: cover;
  max-width: 100%;
  opacity: 0.8;
  border: 5px solid white; 
  border-radius: ;
  margin-top: 1em;
  box-shadow: 2px 2px 10px black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

}

#img-div{
  display: block;
  text-align: center;

#img{
  display: block;
  text-align: center;
}

#img-caption {
  font-family: gill sans;
  color: grey;
  margin-top: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/109.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Hi!

Can you please share your full html and css code? It is generally a good idea to do this as there may be a mistake elsewhere that is affecting the code you have missed.

4

The hint says

  • Failed:Your #image should be centered within its parent.

Where in your css do you style the #image id? Remember that the img element and #image id are not the same thing.

5

Thank you for your feed back.
That was one of the iterations I tried and didn’t work. I replaced img{ with #image and it still does not pass. I believe my html code is correct, as the element image has an id of “image” is descended from it’s parent. I have the correct id’s as those passed the test. The only thing that it must be is the #image in the css style; however, I’ve tried that and it didn’t work so I tried using the element img and as shown here it also doesn’t work. So maybe the styling in the #image is incorrect? I don’t know. I am missing something. Maybe I will try signing out, refreshing my browser or try a different browser.

6

I have tried restarting my browser and switching form Mozilla to Safari, but it still doesn’t work. If you have any other suggestions, I am open and would greatly appreciate it…or anyone else?

Thank you!

1 Like
7

Here is a snippet code in css that I adjusted thinking this would be the fix, but it still doesn’t pass. Just want to post this because it is different from the original post and second post.

#img-div{
  width: auto;
  height: auto;
  padding: 10px;
  margin: 0;
  text-align: center;
}

img{
  display: block;
}

#image{
  max-width: 100%;
  opacity: 0.8;
  border: 5px solid white; 
  box-shadow: 2px 2px 10px black;
  height: auto;
  margin: 0 auto;
  text-align: center;
  }
8

Finally! I figured it out. It was my border throwing off the centering. Once I deleted the border from the #image it passed the test! Unfortunately, I lost my nice border :frowning:

Thank you for your quick responses and trying to help me, much appreciated Ella!

9

I was just about to tell you the same thing! :laughing:
glad you worked it out.

1 Like
10

Of course it had to be a flourish I added…sigh :laughing: I can’t help being a little extra lol. Thanks again Ella.

1 Like