Video Summary

Alright in this section we are going to cover the horizontal center alignment of elements. And this is very different from text alignment and I’m going to show you why. So right here let’s go and let’s just do text. 

Align and we’re going to center Alright, so we center the tax but that’s not so centering the elements. What happens when this element is shorter than the width of the page? Right? Because not on all the time. Do you want this whole paragraph to fit this whole section? Maybe you want it a little bit shorter. So let’s just delete this text align and let’s make the width 50%. 

Alright, so right now the size of this paragraph is half of the entire page. So what happens we come down here and we go margin. 

We just declared that this section and this section is the same size and a set that automatically centers that right but we’re going to be able to do that as well. If we go here, and let’s say we want to let’s say we go margin left 25%. 

We just center that there and just to be safe that we’re dedicating the margin space over here within there. We’re gonna come down here and we’re gonna say margin, right? Or put that as 25%. 

And those are the two ways we can center these different elements and you see how that’s much different than the text align because we can still we still might want to have this paragraph right in the middle and we want it this long. But maybe we want to have the text-align as center as well. They don’t have to be neat. They’re not mutually exclusive. So let’s do text-align, center. 

And now we have this paragraph, the Texas Center, the element is centered and all the page and now we have what we call the horizontal center alignment. But sometimes you’re gonna run into a section where it’s not going to be super easy math where it’s 5025 25. So let’s just try what happens if we do, let’s say 70. If we do 70 Now we are not we’re pushing the margins to the left over here by 25%. But then if we add this up, 25% that’s 95 So we’re looking at about 120% total, and we can’t have that so we’re going to do is we’re going to delete these. And what we’re going to do is we’re going to go back to the equation of 100% minus 70. That leaves us 3030 divided by two is 15. So now if we go here, and we do 15% Now we’re back in the middle, I mean want to just make sure that we’re putting 15% here, so we’re covering this side as well. So we can’t have anything push anything over. And now we’re going to go what happens if we only want this as 20% Now let’s try that out. 20% So now it’s definitely not in the middle of the page. We’re accounting for 15% of the page over here, but they’re got way more real estate than just 15%. So let’s go back to the equation, what’s 100 minus 20, that’s at 80 divided by two. That means we need to have 40% over here, and we need to have 40% over here and now this tax or this paragraph element is in the middle of the page and you can use us for buttons you can use us for pictures you can use us for a whole assortment of elements. anything that you really want to center in the middle of the page, section, or column you can use with margin-left margin-right or you can use with margin auto whatever works for you. Works for me, and on to the next section.