Introduction
Text-alignment is a concept well-known to many people who have used a computer. You can align text to the left, right, or center or even justify it.
And this is just what the property text-align does in CSS i.e it aligns text in a given element.
text-align in action
The text-align property can take any of the following values:
left: aligns text to the left. Defaultright: aligns text to the rightcenter: aligns text to the centerjustify: justifies text.
Let's see each of them in action:
Left alignment:
p {text-align: left}This is a paragraph aligned to the left.
Right alignment:
p {text-align: right}This is a paragraph aligned to the right.
Center alignment:
p {text-align: center}This is a paragraph aligned to the center.
Justified alignment:
p {text-align: justify}This is a paragraph justified. Since justifed alignment matches the left and right edges of lines to each other if they can we are writing some long text in this paragraph to make these lines justifiable. Having justify on a single or even double line paragraph won't have any special noticeable effect as compared to left.
Compare this justified text with the following default alignment:
This is a paragraph justified. Since justifed alignment matches the left and right edges of lines to each other if they can we are writing some long text in this paragraph to make these lines justifiable. Having justify on a single or even double line paragraph won't have any special noticeable effect as compared to left.
Finally we have unset which would simply unset the text-align for a given element and reinforce its previous value (which can be the initial one or the inherited one).
In conclusion
Alignment is an extremely crucial topic in CSS although it may not seem so right now.
As you move on to discover other stuff in CSS, like display: inline-block you will see how text-align can be used to center align complete elements within their parents.
For now, there isn't really anything special to practice in this horizontal text alignment so you can chill for sometime! But before that just make sure you know the names of the properties discussed on this page, and you're all good
