Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The text-align property, horizontal text alignment
The text-align property describes how text is aligned horizontally within the block (in fact, this setting aligns more than just the text, but you can learn more about that in the next assignment).
The property can have the following values:
left– This aligns the content along the left edge of the block; this is the default value.right– This aligns content along the right edge of the block.center— This aligns content in the center of the block.justify— This fully justifies the content with the block. When this setting is applied, the words in a line are so aligned so as to evenly occupy the entire space of the line (the spaces between words in this case will be uneven, since the browser will “stretch” the words across the line). Note that justifying text can make it very difficult for some people with dyslexia to read.
It is important to remember that the text-align property is applied in particular to the container block itself within which the text content is located:
HTML:
<p>
I am text inside the paragraph
</p>
CSS:
p {
text-align: center;
}In fact, there are two more text-align values, including alignment to the beginning of the start block and alignment to end of the end block. If you try to apply these values, then you will see that the effect of the start value matches the left value, and that the end value does the same as right.
But this is not always the case. The fact of the matter is that there are some languages where text is not written from left to right. For example, in Japanese, text is written from top to bottom, in which case the left and right values no longer make as much sense as they do in “European” languages.
These values were created for text-align in order to make the CSS code universal regardless of the writing direction of the text. By the way, we have a special property (writing-mode) to control the direction of the text.
- day-2.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments