I am on the “make a tribute page” project, and I’m having problems with adjusting my image, I have done both img { align: center; } and align=“center” and I don’t know what other one I could do to align it in the center. I’ve also done both of those with “middle” but it absolutely doesn’t move, even when I try “left” or “right”. How could I make the image be in the center, or the middle?
I can help you better if you link or show your code, but mostly times this is the way:
img {
margin: 0 auto;
}
that makes top and bottom margin 0, and auto margin on it’s sides (it will be centered) also depends on it’s display value, if you didn’t change it that should work.
I suggest you make some research when you are stuck on something, this kind of issues are very common and are explained all across the web, these sites will help you a lot on your questions:
MDN: Mozilla developer network I think this is the best one.
W3 Schools
Stackoverflow
and of course the freecodecamp guides, check this one for your issue:
2 Likes
Thank you for that, this is the exact code that I wrote .
<img src=“https://scontent-lax3-1.xx.fbcdn.net/v/t1.6435-9/179487611_319139733108965_1457500510172216131_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=ZtWHsdVTTp0AX89spuQ&_nc_ht=scontent-lax3-1.xx&oh=455eab9b4f6f002212b4f68c9daa49c8&oe=61744815” alt=“ChuggaBoom logo” /Preformatted text>
and on the css I have
img{
max-height: 350px;
max-width: 350px;
margin: 0px;
}
as you can see I’ve placed the code that you suggested, but the image is still in the left side on the screen. as I mentioned, the image does not move in general, even when I use left, right, or any other align code.
this:
margin: 0 auto;
don’t forget the “auto” value is what centers the element.
Yeah, I saw that and I went back to fix it, but that was after I had posted the reply, but even with that, the image doesn’t seem to be moving anyway, I don’t know if it would just be a problem here, on my side, or if maybe I wrote the code wrong, or something.
Please, post your code so far using backticks (```) or a link to codepen, I cannot help without seeing your code.
here is the code to the codepen
You may have to do a…
display: block
…on it and then follow raven’s suggestion to center it.
I think the reason is that IMG is by default an inline -level element. See more here:
How to Center an Image in HTML & CSS
and here—
https://learn.shayhowe.com/html-css/adding-media/.
1 Like
yeah, I did both and it worked. thank you so much for that, and thanks Raven for that. It really did help.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.