HTML & CSS for Absolute Beginners: Text alignment

Key Takeaways

now if we look at our design right here especially the title uh that my head was just on top of we can see that the title is centered and our logo is centered right here uh on that page and so it's want to talk a little bit about text alignment today so we can continue getting uh this project coming together and text alignment is a very simple property on the title that's right there we can come in and just say text align and say Center and if I do that it will become centered Now the default value for text align is actually start and if I do a start you'll see it goes back to the start and that does mean if you come and you say end it will go on and move over to the end instead so we have start for the beginning M uh center for the center and end to go on the other end and so I'm going to bring that back to being a start right there and hit refresh uh or not a start I should say it should be a center right there and that goes in the middle now this might seem a little bit weird if I come look all the way up here where I have my image and we have the header right here uh even though this is an image image If You by default images work with text alignment and eventually you might end up with there you know we're going to be looking at more layout tools and other things that are going to change the game a little bit but if you just have an image that you need centered and you don't have to do anything else with it you can just Center that image by selecting the parent of the image if you select the image itself and you do a text align Center you're sort of saying that the image is centered within its own space so that won't work but if you select the parent so in this case the header so let's come up all the way up here and say the header has a text align of Center and I hit save on there the image will go to the middle the reason this works is because images are inline elements just like our strong and our M tags so they can work as if they're in text and I can actually just to highlight that I could take my image I'm going to copy that I'm going to go in the middle of my logo here or not my logo but of my heading and bring in the logo and so if I hit refresh you can see that my image can live within the text so by default text alignment does work on images so I'm going to undo that because I don't actually want to have uh my logo inside of my heading but there we go but just yeah a very quick and easy way if you just have an image on its own don't select the image itself but select the parent of the image text to line Center will Center that image so that worked out really well uh I do want to mention that you might have already come across or if you do future learning and tutorials and other stuff uh you will see times let's go on my H2S right now just to have a different selector uh you might see a text align of left which is we're not actually changing anything right which will if I change that it'll go over to the right uh so left and right are the original properties we had for it and more recently CSS has put in a big effort into having what we call logical properties so that would be for having a the the start and the end like that and so end and in this case right would be the same the reason we have those these new logical properties is because some languages are left to right and other languages are right to left so languages like Arabic Hebrew farsy among many others are right to left languages and you might have a site that's multilingual in which case you're very happy to have this end so if the person's switching the Lang Ang it will switch along with it but also people will use tools to translate your website sometimes and it's nice if it actually aligns the text properly because if you had to text align end on something that should in a language that goes the other direction it should actually switch to the other side and the way we can do that and this doesn't really make sense cuz we're in an English website but if you go on your HTML element all the way at the top you can put a dur for direction di is equal to and then I can say it's actually going to be right to left RTL right to left and if I do that we're switching the alignment of everything on the site so the default has all gone right to left but that means on elements where we were using a text align end it's actually switched that over because now the end is on the other side and even if all of the content you're doing is just going to be in a language that is left to right which obviously I'm doing it in English but there's most languages in the world are left to right languages where you could come here and actually say left to to right if you wanted to and now it will go back to the uh left to right but if you don't include one that is the default and so by have you know you might be saying everything I'm doing is just going to be left to right I'd still encourage you to use the logical properties we're going to be looking in a few other ones going uh into the future uh just because first of all it makes it's a good habit to get into it's not any more work for yourself and it ends up being something that probably ends up making your life a little bit easier if ever you run into the situation where you need to and for users who are using plugins and other things to change the language of your site they're going to be very happy that you use logical properties instead so start for the regular alignment end to go all the way to the other side and then a center is always Center so nothing too hard to remember there