Card images won't center

Project: Personal Portfolio Webpage

My images for life of me won’t center no matter what I try, what am I doing wrong? My pictures were uploaded to Google Photos if that matters.

CodePen: https://codepen.io/troy_b16/pen/gOXRxRO

I am currently working in mobile view, 430px width in CodePen.

I figured it out, I was using background-image: url(); in my css for the images rather than using an img tag in my HTML. Not sure why that works but it did. Anyone know why?

Hi again,

Did you try to use the CSS property background-position? I also checked the link of your image but it doesn’t seem to work.

Yes I did try background-position: cover; and the pictures were all aligned from the left. Oh I need to update my CodePen, I’m working out of VS Code at the moment.

Did you also try the value center? You wanted to center it right?

Hmmm… I don’t know if I tried that or not, I did end up getting it sorted out though if you check my CodePen. I tried to center it other ways but possibly not with background-position

Now it seems you are not using them as background. As you said, you decided to put them into the HTML code. If you wanted to center the background, I think the property/value background-position: center; could work, as it’s suppose to center the background.

1 Like

Next time I’ll have to try that! Thanks @LucLH !

1 Like

You’re welcome @troyb16!