In this session we discuss how to center an HTML box and show an example of this using the Container. You can center any HTML element by giving it a specific width and setting margins left and right to auto and it will center itself in the given space.
Well, so Ashley said, “For some reason, my container is left aligned. How do I center it?” Depends on what you mean by left aligned that’s why I unmuted your microphone here because it could be… if you’re talking about a regular HTML container, say this container here, this container here is centered by giving it a specific width and setting its left and right margins to auto.
So if you come over and look at the CSS and look at the container… This is a standard HTML system. The width is set at 959 pixels and the margin, right is set to auto and left is set to auto. And that’s exactly the way you center any HTML element inside of anywhere. So you give it a specific width then you set its margins left and right to auto and it will center itself on that space. So if you container doesn’t have a specific width or if it doesn’t have a right margin and a left margin set to auto then it’s not going to be centered.