button{
width: 50%;
margin: auto;
}
				
			

				
					
button{
margin-left: 25%;
margin-right: 25%;
width: 50%;
}
				
			

Video Summary

Alright, in this section, we’re going to talk about element alignment, specifically horizontal center alignment. So we’ve talked about text alignment, and we’re able to set it up for the left, center, and right justified. This is a little different because we’re talking about this specific element itself and not the text within the elements. So let’s say you have a contact form and you have a button at the bottom of your contact form, and you want to center that button in the exact middle of where that contact form is being placed. Now what we can do is we can go and target that button, and we can determine the width, say is 50%. So that’s 50% of the whole length of that contact form. And we’re going to want to do is we’re going to want to claim that the margin is auto so what that’s doing is populating equal distance four that’s left over from the 50% of the whole width of 100. So if we have 100% width, and this button is we’re claiming that 50% Then we’re gonna have 25% Over here 25% Over here, and what we have to do we have to use with this trick or this method to be able to center these, these elements, because we’re gonna have to use the percentage units of measurement. If we use pixels, it’s not going to work on all screens. If you think about if a desktop is 2000 pixels wide, and you’re setting up exactly what the pixels what happens when you go down to a mobile device and you only have 400 pixels of real estate with of width. And you’ve claimed that you want 400 pixels over here for our pixels over there. It’s just not going to work for this trick to really be to work for all devices and zero headaches. You need to use the percentage. And let’s just do a visualization of what this could be. 

So let’s just say from this blue line to this blue line is the length of your website section or column that you’re working on. And say here’s your button. And this button is 50% of the length of between here and here. When we go and we claim that and we go and save the margins, or auto, it’s auto populating the equal distance between that’s left over from this 50%. So essentially, this is 25% over here, 25% over here. And if you add all these up equals 100%. Well, there’s some times where that auto, the margin auto declaration is not going to work. When we’re in WordPress, and we are dealing with different plugins and themes. There’s a lot of CSS code that’s already pre built in and sometimes there is an override to where auto isn’t going to work, but there’s a workaround. And we can just call it out and say we want the margins for the left and the right to be the same. So So for instance, I have a little formula here to figure out how to how to set up the margins left and right. So if you’d have 100% And you have your predefined width of that element, What we’re going to do is we’re gonna take 100% And we’re going to minus that by 50. Right? So for this example, and that will equal 50%. And if we divide that by two, that’s 25%. So we know that if this is this was 50 and these have to be 25% because all of these have to add up to 100, so that way of that element is right in the middle of the page section or column.