- Overview
- Transcript
4.1 Horizontal and Vertical Centering
One of the first things you learn when studying CSS is how to center stuff — either horizontally or vertically. In this lesson I’ll show you how you can center text and images.
1.Introduction1 lesson, 00:41
1.1Welcome00:41
2.Typography6 lessons, 17:23
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms2 lessons, 10:52
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning3 lessons, 12:29
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements4 lessons, 17:44
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques3 lessons, 08:52
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion1 lesson, 01:47
7.1Recap01:47
4.1 Horizontal and Vertical Centering
One of the first things you'll learn when studying CSS is how to center stuff, either horizontally or vertically. Actually, there are three kinds of centering. One, centering lines of text. Two, a block of text or an image. And three, a block or an image vertically. So let's go over each one. First of all, I have some default styling applied here, so I have, let's see, one, two, three, four divs, each with a class of container followed by a number, and I just applied some background color padding and a margin bottom and this is what we get. So the first one, centering lines of text, let's do this container One paragraph we'll do text align center. Okay. So this will center everything inside it, really easy to remember. The second one is when you want to center a block of text or an image. So for that, let's do container number two, paragraph. And we'll start with a specified width for that paragraph. So, width, lets make it about 50%. Okay, so this is what we're looking at. And then to center it, we're gonna do margin 0 top and bottom. And auto for left and right. And that will center the whole block. So margin auto basically means the left and right margins will be calculated automatically, so they are equal. Therefore, that block is placed in the center of the container. Now, as I said, you need to specify a width. If you take this out, the paragraph will just stretch to fill the entire available width. The same thing goes for an image, so we have the third container with an image So, let's do container-3 img. And we're gonna put margin 0 auto. We don't need to specify a width here because it's an image, it already has a width. Now this doesn't work, and that's because images are inline elements by default. In order for this to work, we gotta set display to block. Save, and there it is. Now it's perfectly aligned in the middle. Now the third kind of centering is vertically. So to do that, we have this fourth container, and let's target it real quick. Container four, whoops. And we'll start by giving it a height. Let's say about fifteen ems, okay? So we can see the paragraph that will be centered. And the next thing we do is set display to table-cell. So right now, this container will behave like a table cell and that means we can apply vertical-align middle. Save. And there it is. Just remember, you need to set a height for this method to work. And there you have it, three easy methods for centering stuff in CSS.