We also have access to the same value of center, which will vertically center our text. If we changed it to flex-end, it would be at the bottom. If we made it flex-start, the text would appear at the top. But we can align items along the cross axis using another property called align-items. So we can align items along the main axis using justify-content.
Center and justify text css how to#
Let's add justify-content: center, which is how we're going to horizontally center everything.Īnd then the last thing we need to do is figure out how to center things vertically. Then inside our banner rule, after display: flex, let's do a couple more things. So inside the rule for the banner class, we're going to set our display to flex. The banner class represents the div that is the parent of that text. All we need to do is we need to deal with the flex container, which is going to be our banner class. When we use the Flexbox model, we don't even need a rule for the banner-text class. Centering Text With Flexboxįlexbox allows us to vertically center our text much more easily and more accurately than the old-fashioned way.
Center and justify text css full#
banner-text and play with it a little bit, increasing the top padding to various different values until it looked right.īut the old-fashioned way is not always reliable because what if somebody overrides your text sizes to the point where it's not centered anymore? You don't have full control over it that way. Well, the way I used to do it is just to eyeball it. So our container is the banner itself which is 300 pixels tall, so if we only had one line of text we could set our line height to 300 pixels and that text would be vertically centered.īut what if you have several lines of text? What if you have a paragraph of text? What if you have a mixture of text and images, and you want a whole block of content to be vertically centered? If you just have one line of text, you can easily vertically center it by setting the line height to be the same height as the container. The hard part is vertically centering our text. So we could just go into the rule for our three headings, h1, h3, and h6, inside our banner, and simply set the text-align to center. Horizontally aligning our text is very easy to do. What I want to show you at this point is the way that I used to vertically and horizontally align our text. And then there are other rules as well that you can look through. We've set the margins to zero so that they're nice and snug right next to each other, and we've set a text shadow behind that text. And we've applied some styles to the three text elements that are inside our banner, our h1, h3, and h6. We've positioned it, and sized it, and set its height to 300 pixels. If we jump down to the banner class, we've set our text color to white. Then inside our CSS, we've set up the banner. So all three of those text elements are contained within this div that has a class of banner-text. And then we have an h1, h3, and h6 element that contains all of our text. Inside that we have another div with a class of banner-text. So what we've got here is a banner, and all of it's contained in a div with a class of banner. Start by going to the starting pen for this project on CodePen, and click on Fork to open a new copy. In this tutorial, I'll show you just how easy it is using the Flexbox model to horizontally and vertically center any piece of content that you want to center.