From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Center aligning with margin

Center aligning with margin - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Center aligning with margin

“

- [Instructor] There's one more thing to know about margins. This property can also be used with the auto value to center-align block elements. Let's try this out in a CodePen. To center-align the elements, the first thing we'll do is add a width to the section element. Any value can be used, it just needs to be smaller than the viewport. If the element spans all the way across, then there would be no need to center-align it. I'll go with 400 pixels. For the margin, the top and bottom value can be set to whatever you want. If you don't want any additional space, just set it to 0. Then set the left and right values to auto. I'll be using the two value format, so 0 for the top and bottom and auto for left and right. Make sure there's a space between the two values. The horizontal space is now split evenly between the left and right margins, and the element is center-aligned. Now, you might be thinking, if I set all…

Contents