p{
text-align: center;
}
h2{
text-align: right;
}
div{
text-align: left;
}
h2{
text-align: justify;
}
				
			

Video Summary

All right, we’re gonna get into text alignment. And this is a pretty straightforward property value set. Just think of this as how would you want to align your text in a Word document. If you want it centered, do you want it to ride you want to laugh, or potentially you might want your paragraph to be justified. 

And that’s where basically every line is the full length of the area where that text is being placed. And I don’t think we need to break this section up, either I think we’re gonna be able to bounce back and forth really easy. And let’s just hop over into code pen and see how this works. Right. So we have a paragraph right here. And that has made the font size you know, I’ll make this a little bit bigger. Let’s do 40 So we can see a little bit easier. 

And let’s make this go to the right and just puts it all the way to the right maybe we want this centered not centered center, and now it’s in the center. And the the way that affects the line, sets it up we can we can put it left but the defaults always going to be left. So maybe you’re gonna run into a predefined element that maybe set up and centered but you don’t want it then you could essentially target that and use the left value to put it to the left. But more times than not if you don’t do anything, it will all automatically go to the left. Now we can use justify let’s just try this. 

And justify doesn’t really quite work in this. In this example, that’s why I created this example over here. So let’s just make this so what I do here is I have a paragraph and I put a border around it I made the width 300 pixels. Because this is more times more times than not this is the idea of when you’re going to use justify if you’re using as like a heading or a single line. It doesn’t really quite work. But if you have a small, a small section of text like we have right here, justify might end up being something that you want and might end up looking better. 

So what we just did right here is now that once we satisfy was justified every single line once the reach a certain point will get pushed to make it to make the spacing between the words fit on a single line. Sometimes this works sometimes it doesn’t. We’re talking about visual appeal. And really before you end up using justify, let’s say if I had maybe I wanted to have five sections right here where I’m talking about maybe different services or different features of my product and I want to have a little bit of a text right here. Once Once you have all five of them say it’s like 12345 then you could be able to maybe target all those paragraphs and put justify and see if they’re going to work but more times than not is not every paragraph is going to work some some senses are gonna have longer words some senses are gonna have a bunch of small words wrapped together like this is a so you’ll end up getting like this big spacing but up here, it’s spaced out a little bit and it makes it looks really nice. But down here it kind of looks a little bit wonky. It doesn’t really work out the way that we wanted to. but this was just a good way to show you how the justify content works. and again, this is a pretty straightforward property value set. and I don’t really need to get more into it. but if you need to use the justify or the center or the right functions, by all means, this is how we’re going to be able to do it on to the next section and see how we can transform different text features.