Aligning text in CSS: the text-align property

In programs such as Microsoft Word, for example, you have probably come across tools for horizontal text alignment. You can align text left or right, centered, or justified. The same is true in CSS - text alignment is done using the text-align property and the corresponding values, which are shown in the table:

Example of a style entry:

P ( text-align: left; )

Left, right, and center values ​​Left-aligned text almost always looks good on web pages and is easy to read. Right alignment in European languages, as a rule, is rarely used, but it cannot be called completely useless: this style is useful for beautifully designing captions for photos or quotes, aligning the contents of table cells or small fragments of text. The center value is often used for the same purposes.

The justify value Justify text in CSS can be used for printed versions of pages, but it is not recommended to get carried away with this style on web pages designed for display viewing. Why? At first glance, the justified text looks nice and even, like a column in a newspaper. But to stretch the text this way, the browser has to add extra space between words, which can create unsightly gaps in the text that make it difficult to read. In programs designed to prepare data for printing, there is a much finer adjustment of spacing in the text, and also often uses word wrapping, which is not available in many browsers. Therefore, it is necessary to check how justified text looks on web pages, and the first question to ask yourself is: is it easy to read? This is especially true for narrow blocks of text (including mobile versions of pages).

Start and end values ​​The start and end values ​​for the text-align property are implemented in CSS3 and work much the same as left and right , but there is a difference. By applying the start value to text that runs from left to right (LTR), the alignment will be left (correspondingly, for text that runs from right to left (RTL), the alignment will be right) . It is logical that the end value works in the opposite way (that is, it aligns LTR text to the right and RTL text to the left). These two values ​​are not supported by some browsers, including Internet Explorer, so unless you absolutely need to use them, we recommend using the left and right values.
The screenshots show examples of using different values ​​for the CSS text-align property:
Screenshot 3: Aligning text to width. With small font and large page/block width, this option for aligning text on a web page looks acceptable.
Screenshot 4: the font size has been increased and the block width has been reduced compared to the previous example. As you can see, ugly gaps have appeared in the text (underlined with a red line).
Screenshot 5: two ways to align text using the example of the mobile version of our tutorial (on the left - text-align: left, on the right - text-align: justify). Try reading the text in both columns and determine which option is more comfortable to read.

In this article I will tell you how to place a block div centered. There are many ways, but not all of them allow you to do exactly what is required. I will give examples of the best and simplest methods.

In general, there are a dozen ways to correctly center a div block; each webmaster uses his favorite/most convenient method. But nevertheless, there are several basic, most popular and universal methods. And of course, valid by all modern standards.

And yes, it’s worth saying right away that these methods may not work in ie6 or something similar. I don't even pay attention to this browser, no matter how many people use it. It's time to stop using old stuff.

So what do we have?

Method 1. The coolest

margin:0 auto;

A very effective method, which also allows you to align the indents at the top and bottom. What is the trick of the method? Everything is just crazy. We have a block with a certain width (in pixels or percentage), to which we set the same indentation on the right and left using the “auto” property, and as a result we get a centered div block. The first value (0 in the example) is the top and bottom padding.

For example, for top alignment we write:

Margin:10px auto;

To align top and bottom:

Margin:10px auto 5px;

In my opinion this is the best way center the blocks. Moreover, it is completely valid.

Method 2. Interest

If the block has a percentage width, then we can align div centered applying equal padding to bring the full width to 100%. For those who don’t understand, I’ll show you with an example, it’s easier this way:

We have a block with a width of 50%, to align it to the center, we need to make side margins of 25% on the right and left, respectively. Let's look at the code:

Without straining, we get a block in the center, aligned with banal mathematics (50 + 25 + 25) :)

Method 3. Mixed

This method was recommended in the comments sman.

As I mentioned at the beginning of the article, there are a lot of ways to center a block. Everyone chooses the one that he likes best. I'm waiting for comments and new ways :)

Method 4: Using an additional block

Way Victor in comments:

Neither method solves the problem with floats inside a block if the width of the block is not known (for example, a menu).

In such cases, I use an additional block that wraps the aligned block. The style is something like this:

#dop-block ( position: relative; float: right; right: 50%; ) #block ( position: relative; float: left; left: 50%; )

Most of us have had a clear idea of ​​a perfectly designed page since school. An even scattering of letters, slender lines of words, a strict rectangle of text framed by even margins - this is exactly the picture we see when leafing through any printed publication. There is a great temptation to depict something similar on a web page, especially since a well-known means is proposed for this - text alignment. However, what is good for a typographer is a mortal sin for a web designer. And all because, when applied to site markup, this function becomes overgrown with so many shortcomings that its only advantage in the form of a smooth right edge simply fades before our eyes. Here are just a few reasons why you should ditch justification in favor of left alignment.

Visible clutter inside a text block

Yes, yes, the smoother the edges of the text block, the more obvious the mess inside it. In typography, a whole arsenal of tools allows you to achieve consistency in text: hyphenation, adjusting the spacing between words and the distances between letters, and even slightly wider or slightly narrower font options. But the layout of an Internet page suggests, as a rule, only one way to “stretch” a line from edge to edge - an uncontrolled increase in the width of spaces. Not only does this lead to the appearance of unsightly gaps between words, but these gaps, as if by the law of meanness, often fall at approximately the same place in each line, forming so-called vertical “rivers”. All this gives the text a very untidy appearance.

Unreadability

But if aesthetics could still be sacrificed for the sake of neat edges, then the obvious problems with the visual perception of the text are still too high a price to pay for them. And justified text is objectively much less readable than left-aligned text. The main reason lies in the same increased intervals between words: the eye is constantly forced to look for the beginning of the next word, and due to the difference in spaces from line to line, it is also forced to adjust from one distance to another.

The need to work on line length, often to no avail

In fairness, it is worth noting that the identified disadvantages of justified text can be reduced by increasing the line length. However, this method will not always be effective. But it can reduce readability with a very high degree of probability: it is difficult for the eyes, having scanned one long line to the end, to accurately and quickly jump to the beginning of the next one.

Unsuitable for mobile devices

The narrower the column with text, the less it is subject to alignment. And here this format comes into direct conflict with the requirements of mobile devices, for which, on the contrary, the shorter the line, the better. Agree, it’s one thing to follow a long line on a full-screen monitor with your eyes, and quite another to scroll each line back and forth over and over again. A dubious pleasure, but a sure way to lose your mobile audience!

It would seem that if we could add a word wrap function to the page, all these problems that arise when aligning text to the width of the page would be solved. But the catch is that HTML markup does not provide such a function. So it turns out that today there is no other way to maintain acceptable spacing between words on a web page other than aligning text to the edge.

Thus, when creating an Internet page, it is important to remember the main thing: a website is not a book, and you need to approach its design from the positions dictated by technology and the psychology of perception, and not by someone’s aesthetic views, however, very, very conditional. Believe me, if your text is neatly placed and, first of all, readable easily and with pleasure, no one will pay attention to such a trifle as uneven margins!

By the way, when you read this article, did you notice that the text is not justified?

How to align text in Word on both edges, several ways.

Word is the most popular editor. It provides users with a huge number of possibilities, making their work simpler and easier. To use them, study the program well, find out all its secrets.

Do you want to know how to consistently earn money online from 500 rubles a day?
Download my free book
=>>

When working with text, special attention is paid to its location. Most often, the editor automatically sets left alignment. You can change the location of the text using special buttons.

Some users, without knowing this, try to make text placement even using spaces. This method is not convenient and takes a lot of time. Moreover, it is almost impossible to correctly align the text “by eye”. If you are writing a thesis where formatting plays an important role, it may simply not be accepted.

How to align text in Word on both edges, exactly

To ensure that the text is even on both edges, use justification.

Home Tab

You can align text on both edges using the editor's main menu. There are several buttons in the Paragraph section. To ensure that the text is positioned evenly on both the left and right edges, select it and click the “fit to width” button. The text will be aligned by creating additional spacing.

Context menu

There is another way to make the text even on both sides. After selecting the text, use the right mouse button, click, and in the context menu that appears, click “Paragraph”. A window will appear where you need to select the “width” alignment.

Keys

There are special keyboard shortcuts that allow you to place text as required. To make the text even on both sides, select the text and press the “CNTR + J” key at the same time. If the keys do not work, then your settings have been changed.

Extra options

Clicking special buttons alone may not be enough to align text correctly. You may need to hyphenate words and carry out additional checking.

Hyphenation

There are cases when, when aligned, the intervals between words increase so much that the text looks ridiculous. Prevent this by creating a hyphenation.

Open the “Page Layout” section, click on “Hyphenation” and select “Auto”.

Checking the correctness of registration

You can check at any time whether your work is formatted correctly and correct it. In the “Home” tab, click the button. You will see extra spaces due to the appearance of a large number of dots.

How to align text in Word to the edges, summary

Aligning text in Word on both edges is quite simple. Start studying the editor and you will make your work easier. I wish you success in acquiring new knowledge!

P.S. I am attaching a screenshot of my earnings in affiliate programs. And I remind you that anyone can earn money this way, even a beginner! The main thing is to do it correctly, which means learning from those who are already making money, that is, from Internet business professionals.

Get a list of proven Affiliate Programs in 2017 that pay money!


Download the checklist and valuable bonuses for free
=>>

Html there is a universal parameter and it is called ALIGN. It can be used with various html tags:

p | h1 | div | table | thead | tbody | tfoot | tr | th | td

Possible values:

Center- center alignment
Left- left alignment
Right- on the right
Justify- in width, along the left and right edges. In this case, large gaps may appear between words.

Text is aligned to width

Appearance in browser:

The title is centered

The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width.

The content of this block is aligned to the right side

Please note that left alignment occurs automatically. Therefore, there is no need to specify such a value for the align parameter.