How to put image caption under the picture

hi, I have a problem with text align I have a image, and image captions, one word is beside image and others are under, I want to put all words under the image but i dont know how, can anyone help me?

 <div id="img-div"> 
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug who saved many lives" id="image" <caption id="image caption">Dr. Norman with his co-workers</caption>
  </div>
#image caption{
  text-align: center;

Where is the closing bracket for your image?

sorry I am bothering you, I put closing bracket and that has no impact on captions align

It will be easier to help if you threw this into codepen.
Can you share your codepen link with us?

Also, I don’t think you can have spaces in your id like this

Try using a dash instead, image-caption

There are a few things going on here:


FIRST: #Ids and classes cannot have spaces in the text.

SECOND: There is a Missing bracket on the end of the tag:
Screenshot 2022-03-29 4.42.44 AM

THIRD: Add #image-caption with the hyphen in CSS

FOURTH:
Create another CSS Id called #img-div, and add text-align:center;


The working Code:


 <div id="img-div"> 
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug who saved many lives" id="image">
   <caption id="image-caption">Dr. Norman with his co-workers</caption>
  </div>

#img-div{
  text-align:center;
}
#image-caption{
  text-align: center;}

You are not bothering Anyone. Don’t worry about that.

2 Likes

how to do that? I copied it from codepen

You can copy the link you find at the top of the browser window.

That way we can see your whole project, especially if you have more questions later on.

ooh that, I missunderstood,
here:

1 Like

I copied code you gave me and still doesnt work, I shared link from codepen can you check it, ty

Sure. I can check it for you right now.

Or Jessica can handle it, if she wants.

You are free to address that issue.

I was going to comment on other stuff I noticed to help @filip1 out with future projects. :slight_smile:

No, I’ll leave it for you. You are the most educated of us two. I don’t want to lead anyone astray.

It looks like you didn’t quite copy it right and might have misunderstood the hints given. I generally recommend against just copy-pasting if someone writes code for you.

You still have a syntax error here

<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug who saved many lives" id="image" 

You are missing a > at the end which was @kevinSmith 's comment from earlier.

You still have spaces here for your id which you can’t have

id="image caption"

Look back to our earlier discussion for using dashes.

It looks like you copied the suggestion for the correct code incorrectly.
Take a closer look at it again for better understanding.

But there are a few other issues.

You can’t have spaces here

id="Dr. Norman Borlaug"

Use dashes for ids

Title tags are meant for the head section.

  <title id="Dr. Norman Borlaug">Dr. Norman Borlaug</title>

I would get rid of those title tags for now.
Here is the correct use for title tags

And then caption tags, really should be used for tables.

Maybe just use a p tag instead here

<caption id="image-caption">Dr. Norman with his co-workers</caption>

A more semantic approach would be to use the figure and figcaption elements.

I know I threw a lot of information at you.
But just take your time to look it over.

But to sum up, be careful when copying other people’s suggestions to make sure that you copy it correctly and fully understand it.

Hope that helps! :slight_smile:

2 Likes

thank you this is useful, you helped me, I deleted code and started again from beginning and passed all 10/10, used <figcaption> instead of <caption> and did it like it was explained on example on the page you presented