Trying to align caption after my image to center using css

Am trying to spruce up my tribute page to practice the basics of html and css styling. I’m having a hard time centering the caption text after my image. I can post the the whole html file but I’ll just include the section that include the image and the caption text after the image.
Let me know what I’m doing wrong.

Here is the html:

<div id="img-div" class="center">

<img src="file:///Users/nersesarslanian/Downloads/LudWitt.jpg" alt="Ludwig_Wittgenstein" id="image">

<div id="img-caption" ><p class="bold">Wittgenstein's Life and Work</p>
</div>

</div>




This is the CSS:

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

.img-div {

  margin: auto;
}

.img-caption{
	font-size: 80%;
	text-align: center;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

Hi @Nerses ,

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks.

```
Your code goes here
```

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

1 Like

Please make sure to link your styles.css to your HTML file.

Also don’t forget that you have both of these as classes in your css file, when you have them as ids in your HTML file :

I did link styles.css I just didn’t include it in the post.
I didn’t realize I was selecting -img-caption and im-div as class when they were ids. I switched them to class and it worked. I just had to resize the picture to fit its parent div element.

Thanks for you help : )

1 Like