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.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p class="page-title">Blog</p> <nav class="blog-navigation"> <a href="index.html">Return to home</a> </nav> </header> <main> <article> <h1>Day Two. I want to become a coder</h1> <p>Today I spent the whole evening on the Internet. I read about the advantages of working as a coder. I often spent my free time watching cat videos, of course. But then I remembered something:</p> <ul> <li>You are helping a useful cause</li> <li>You can work remotely</li> <li>Interesting people</li> <li>Good salary</li> </ul> <p>My desire to learn has dramatically increased.</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 24px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: "Verdana", sans-serif; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Goalscompleted

Set the horizontal justification (text-align) to the value right for the .page-title class,
then change the value to left (or delete the property altogether),
and then change the value to center.

The text-align property, horizontal text alignment

Comments

Log in

Sign up

Restore access