So, after 1 hour searching through the interwebz, I can’t find anything working to center images horizontally in CSS that works.
display: block;
margin-left: auto;
margin-right: auto;
was my first guess and what I found the most out there, but it doesn’t seem to work, I don’t why, and that frustrates me a ton.
I’m looking for answers! And I can’t find any! Plz halp!
Link to the codepen.io :
Add text-align:center; on your center style
From what I’ve read and heard, isn’t this unrecommended by W3C?
I’m really bugged out about using suboptimal solutions, as if I become a programmer for a company, I don’t want my code to become unrelevant because of updates when I could have done it better the first time.
I don’t understand what you mean by centering images horizontally. If you want the images to be displayed on separate lines, set img {display: block} on the image elements (because images are inline elements by default) or else wrap each image element in a div element and centre them in their div containers.
I had to add the “inline” value because pictures didn’t add on the same line by default. I’m not sure what you mean when you say they are inline by default.
What you mean by “centre them in their div containers”? I saw that there existed an " align=“middle” " command in HTML, but this is not supported in HTML5.
img {
border: 0px solid black;
border-radius: 50%;
padding: 1em;
display: block;
width: 10%;
height: 10%;
vertical-align: middle;
margin: 0 auto;
}
Copy and paste the above code. It will center them.
What @nibble said or if you know some flexbox then just set the flex container in the case your center div to {display: flex;} and {justify-content: center;}.
Also there is some error on your img styles, There is no such thing as {display: block inline}
Ok, so the inline element did mess up with the code, but now the pictures are not on the same row.
I added the inline because I wanted the pictures to be on the same line. It did mess with the code and I’m gonna try your solution.
EDIT : same thing as above, all pictures appear centered, but not on the same row (line)
the display property takes could take values such as {display: inline} which is the default for images, {display: block} or {display: inline-block} etc. I would also recommend you do some more reading to understand the difference between an inline element and a block element.
It seems your challenge is articulating what you want. I assume you want the images to be on the same line and of the same width and height right? If so remove the display: block
Here you go. This explains everything you need to know https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/
Cheers!
Didn’t expect condescendence, but that’s okay. At least you try to help. I get the difference, but I also listen to people when they tell me something and I asked the question.
@nibble : That’s what I meant by “centered horizontally”. I don’t know how to state that differently. But yes, on the same line (row) and centered (horizontally, but vertically as well basically). I’m not native english, but I did check the grammar and it’s the same in English.
Sorry if I look frustered, but that’s been 2 hours of looking into this now, and I keep getting answers that don’t work as intended. The only thing working as I expected is the one that’s not recommended by W3C, aka “text-align: center;”
Hey bro I do not think I was disrespectful, If I was then I am sorry. I could have just given you the solution but that would not be helpful to you but I think if you go through the article you will clearly understand everything you need to know including how to use margin auto properly.
We are all learning here and being frustrated is part of it. If you still do not understand, I would be happy to help in anyway I can 
I’m just getting through with it and trying to understand thanks to that article and other content, but that doesn’t change much for now :
So I’m going through with Flex and gotta learn about it because what I want to do aside of it requires some tweaking that I can’t yet do with my knowledge of Flex.
I wouldn’t say disrespectful, but dodging the main question and then telling me to go back to learn what I already understood isn’t really helping after 2 hours of trying and tweaking. But hey, I understand, no bad feelings. I’ll go back to my own research.
Sorry if you feel offended. Just trying to help. Sometimes our learning journey is as frustrating as yours. It is okay to go over something which you have already learned, to see whether there is something you have missed. All programmers even the experienced ones do it all the time. Happy coding!
I’ve been on it for 2 to 3 hours now. I’ve already re-read it… I don’t feel offended, just desperate for a solution that’s not out of date. And for now, none work…
PS : And I’m always thankful for anyone trying to help. I just pointed out that 1 message was kind of condescending. That’s all.
body {
margin: 0px;
}
main {
background-color: #EAEAEA; /* sic */
}
img {
border: 0px solid transparent;
border-radius: 50%;
padding: 1em;
width: 10%;
height: 10%;
}
h1 {
font-family: cinzel;
color: #FFF;
font-size: 60px;
}
h2 {
font-family: roboto;
color: #FFF;
}
#tmain {
background-color: #0B0B0B;
padding: 1.5em;
padding-bottom: 3em;
margin: 5px;
text-align: center;
}
#center {
display: flex;
justify-content: center;
}
Copy and paste the above and see whether it solves your problem
To use margin auto method, you must specify the width of the container else it would not work because the div container already spans the entire width. This is how I would rewrite your code to make the margin auto work:
.
or use flexbox above
Hey everyone, I’ll enter my bit to your conversation. First of all, as you all know, images are inline elements, meaning they behave just like text while being a box element, which causes a lot of confusion. Secondly, people have already found pretty good conventions for dealing with images, so it’s less about problem solving and more about knowledge of good practices:
RULE OF THUMB: Each image should always be strictly contained in its block container (div) covering 100% of it and never causing overflow. This rule converts dealing with images to dealing with div containers and we see great consistency across different browser and well, it’s just awesome technique.
Now you only need to solve 2 problems:
There are multiple ways to solve 
Some of them are taught here on fcc, but I personally recommend object-fit solution:
.img-container {
overflow: hidden;
}
img {
width: 100%;
object-fit: cover;
}