One simple CSS property which you might want to use is the ‘text align’ property. The text align property describes where on the page the text sits.
Well, all of my words are important so they should always go at the top.
There is a couple of problems with that.
Firstly, you can’t put all your words at the top as they will get in the way of each other.
Remember HTML elements appear in the order their tags are written.
I remember now.
Also, text align only controls where on the page horizontally your text will be.
What does that mean?
Text align can’t move text up or down.
But you can use text align to say whether the text is on the left, right or in the middle of the page.
Here is how you use the text align property. It starts with adding the name of the CSS property, which in this case is ‘text-align’.
text-align:
After this, you write in your code where you want the text to sit. Let’s have a look at a few options.
For text on the left of the page, like this, use the value ‘left’.
Although we all know that Aria sleeps where she wants but if we wanted to align Aria to the left of the sofa, it might look like this.
Here is what the finished code looks like:
#aria {
text-align: left;
}
Left alignment is the default option, so you don’t actually have to add code to align text to the left of the page most of the time. Most text on websites, just like in books is left aligned and so it is very common for text to be aligned to the left.
Aria sleeps where she wants, when she wants
To position text in the middle of the page, use ‘center’.
This what Aria looks like when center-aligned on the sofa.
And this is what the code might look like:
#aria {
text-align: center;
}
It is good practice to center-align text when you want to draw extra attention to it. So try aligning your header elements to the center of the page.
Aria is always aligned to the center of attention.
The last option is to align text to the right of the page. To do this, use ‘right’.
Here is what Aria would look like if she were aligned to the right.
Here is some example code:
#aria {
text-align: right;
}
Aligning text to the right isn’t very common but you may want to position text under a picture this way or draw extra attention to the paragraph.
With the text-align property you can position the text where you want it to be for the layout of your website.
Use the box below to try out the different text align options.
text-align: