Tribute page: issue with text-align:center

1

Hi! I tested my page on codepen and I had a problem regarding the layout:

“2. The element should be centered within its parent element.”

It looks that I have managed to correct it since it came back 100% correct, meaning all the requirements were met, however my image (in Chrome) and the image caption still doesn’t show centered. I feel unsure of my “code” in this section:

#img-div{
height:auto;
max-width: 500px;
text-align: center;
padding: 6px;
}

#img-div img{
display: block;
height: auto;
margin: auto;
max-width: 100%;
}

I want to leave the website as simple as it is now, I’m just concerned about the image centering, I hope someone can help me out. I use Brackets, if that’s relevant information.

Here is the whole project: https://codepen.io/musicianATswampCastle/pen/oVVrMX
Thank you!

2

you can give your #img-div

margin: 0 auto;

This will horizontally center your img-div.

1 Like
3

Thanks, @shimphillip, it worked in the browser and on codepen as well :slight_smile:

1 Like
4

No Problem!

Just want to let you know that your image is broken on codepen for other people.

You will need to use a different source to host your image for others to see it.

1 Like
5

Fixed! :slightly_smiling_face:

1 Like
6

Good job! it looks pretty good.

You can eventually work on making it responsive as well.

1 Like