Aligning elements in HTML. CSS properties text-decoration, vertical-align, text-align, text-indent for text decoration in Html The align attribute in html means

As I promised earlier, in this tutorial you will learn how to horizontally align the content of any HTML tag on a page without using the deprecated align attribute. As you may have already guessed, we will again use styles (CSS), or rather our favorite style attribute.

So, to align the content of an HTML element, you need to assign one of the following values to the style attribute:

text-align:center- Align each line to the center of an element, such as a paragraph.
text-align:left- Each line is pressed tightly to the left side of the element (this is the default).
text-align:right- Each line is pressed to the right side.
text-align:justify- Align immediately to the left and right sides of the element. Will explain. Typically, an element, such as a paragraph, always has one side of the text that is straight and the other side that is “torn”, since the lengths of the lines are slightly different. And when we use the text-align:justify value, then each line is evenly distributed in width. If necessary, the browser adds additional spaces between words, and the first and last word of the line are always pressed to the corresponding sides, so you get a block that is even on both sides.

Example of tag content alignment

Tag Content Alignment

Heading in the center.

Paragraph in the center.

Result in browser

Heading in the center.

The text of the paragraph is pressed to the right.

Paragraph in the center.

In general, horizontal alignment only applies to block tags and table cells (we'll talk about those later). Although, on the other hand, even if you try, you will not be able to apply it to the built-in ones. Why? Remember when we recently discovered that the width of an inline element is equal to its content? Accordingly, it turns out that this very content will simply have nowhere to align and the browser will simply ignore your “art”. :)

Homework.

Create a title for the article, its two sections, and one subsection in the first section. And let the title of the article be located in the center of the page.
Set the entire page to Arial and all headings to Times in italics.
Set the text color of the article title to #FF6600, sections to #6600FF, and leave the subsection unchanged.
Write one paragraph under each heading, with each paragraph spanning at least three lines when viewed in a browser.
Align the second paragraph to the center, the third to the right, and the fourth to both.

Until now, we have aligned elements only to the left. More precisely, you and I didn’t do this at all, and the browser itself aligns elements to the left by default. Of course, it would be too boring to align everything to the left. Therefore there are various ways center and right alignment.

Alignment of elements is something you just need to know when doing this. The first thing you need to do is type a simple page.

Once upon a time there was a tag

I don’t advise you to use it now, due to the availability of more modern methods, but I can’t help but mention it. It is very, very simple to use. Everything you need to be centered, you place inside this tag. For example, here we align the 1st level heading to the center.

You can add a picture, also aligned to the center, let's also move to the next line using the tag
:

1st level heading, center aligned

It was a tag

, which is already outdated, in addition, contrary to your expectations of tags And simply doesn't exist. Let's say left aligned by default, center aligned using tag , but what about the right one?

To solve this problem, the developers came up with universal method element alignment HTML. The method is to use so-called containers, which are created using the tag

. That is, everything that needs to be placed in a specific container is placed inside the tag

. And this tag already has the attribute " align", the value of which determines the position of this container. There are three values: " left", "center", "right". By default, it is " left“However, I think that this does not surprise you.

Let's write the same one now HTML code, but using containers, in addition, let's align not to the center, but to the right.

As you can see, everything works. I advise you to also change the values of the attribute " align" to look at other types of container content alignment.

Another way to align elements HTML- these are tables, but this topic deserves a separate discussion, so we’ll talk about it in one of the following articles.

For now, your page should look like this:

1st level heading, center aligned

1st level heading, right aligned

Sincerely, Mikhail Rusakov.

P.S. If you want to know more about HTML, then take a look at my free course with an example of creating a website at HTML:

For images, you can specify their position relative to text or other images on the web page. The way images are aligned is specified by the align attribute.

This attribute is deprecated, use styles instead.

Syntax

Values

In table 1 lists the possible values of the align attribute and the result of its use.

Table 1. Using align attribute values

Meaning	Description	Example
bottom	Aligns the bottom border of the image with the surrounding text.
left	Aligns the image to the left edge of the window.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Aligns the middle of the image to the baseline of the current line.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Aligns the image to the right edge of the window.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	The top border of the image is aligned to the tallest element of the current line.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Default value

Example

IMG, align attribute

This text wraps around the left edge of the picture.

Browsers

The following notations are used in the browser table.

- the element is fully supported by the browser;
- the element is not perceived by the browser and is ignored;
- during operation, various errors may appear, or the element is supported with reservations.

The number indicates the browser version from which the element is supported.

Description

Aligns a block of text to the edge.

Styles must be used instead of this attribute

Syntax

Values

left Aligns text to the left. In this case, the lines of text are aligned to the left, and the right edge is arranged as a ladder. This alignment method is the most popular on websites, as it allows the user to easily find the new line and comfortably read large text.

Default value

center Aligns text to the center. The text is placed horizontally in the browser window or container where the text block is located. Lines of text seem to be strung on an invisible axis that runs down the center of the web page. This alignment method is actively used in headings and various signatures, such as captions; it gives an official and solid look to the text design.

In all other cases, center alignment is rarely used for the reason that it is inconvenient to read a large amount of such text.

right Aligns text to the right. This alignment method acts as an antagonist to the previous type. Namely, the lines of text are aligned to the right edge, while the left remains “torn”. Because the left edge is not aligned, which is where new lines are read, this text is more difficult to read than if it were left aligned. Therefore, right alignment is usually used for short headings of no more than three lines.

We do not consider specific sites where the text has to be read from right to left, where perhaps a similar alignment method will be useful. But where in our country have you seen such sites? ?

justify Justified, which means aligned to the left and right at the same time. To perform this action, the browser in this case adds spaces between words.	Example. Text alignment	P tag, align attribute	Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.	Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
1	1	1	1	1

Browsers: Desktop Mobile	Internet Explorer	Chrome	Opera
1	1	6	1

✖

Browsers

The following notations are used in the browser table.

- the element is fully supported by the browser;
- the element is not perceived by the browser and is ignored;
- during operation, various errors may appear, or the element is supported with reservations.

The number indicates the browser version from which the element is supported.

Safari

Firefox Android Firefox Mobile

Well, even earlier we looked at all types in detail, learned how they can be grouped and what priorities the browser sets when interpreting them. True, all this was divided into several articles, so in order not to get confused, I advise you to study the materials in the order as given in.

Text-decoration, text-align, text-indent in CSS

How to work with text in Css? It would be logical to assume that there are specially designed rules for this purpose. Let's start with text-align, which is actually a replacement for the align attribute (it was used to align content like P paragraphs or headings).

It has only four possible meanings:

The meaning remains the same as before. Text align- this is the horizontal alignment of lines. This rule applies exclusively to block elements (paragraphs, headings, etc.), i.e. those tags in which several lines may appear. Because Since inline elements can only have one line, there is no particular point in using text-align in them.

It is clear that the values of this rule mean alignment, respectively: left, right, center and page width (Justify - simultaneously left and right by increasing the distance between words) . It goes without saying that the Justify value should be used for elements with at least several lines of text, otherwise there will be no visible effect.

For example, I justified the previous paragraph (you can see it has smooth borders on both the left and right) using:

Text-align:justify;

By default, horizontal text alignment is left, i.e. There is no need to specifically write text-align:left, unless, of course, you have previously specified a different alignment. By the way, I aligned this paragraph to the center (center), again for a clear example, but here, I think, everything is clear.

Next Css rule text-indent allows you to specify a red line, for example, for text in a paragraph tag P. The indentation of the red line can be specified by specifying a value (either with a plus sign or a minus sign, using ) or using percentages:

What are percentages calculated from in text-indent? From the width of the area allocated for text. Those. The CSS rule text-indent:50% will set a red line equal to half the length of this very line. Well, this paragraph serves as an example of such a rule.

Or you can, for example, set a negative value for the red line in text-indent and then we will get approximately what you see in this paragraph. To achieve this result, I wrote the following CSS rule for the P paragraph tag:

Text-indent:-1em;

Well, a typical use of text-indent (to set the standard red line) might look like this: text-indent:40px; (applied to this paragraph, by the way). This rule, just like the text-align discussed earlier, only applies to block elements, i.e. where several lines may appear (paragraphs, headings, etc.).

Okay, now let's move on to text-decoration(design using a horizontal line), which is already applied to all Html elements (both inline and block).

It can have only four meanings:

Those. can be used using text-decoration: overline, line-through or underline, or use nothing at all (none). Some HTML elements already have a horizontal line design by default, for example (they are underlined by default).

Therefore, highlighting something else with underlining (except for hyperlinks) is not good, because users have it written in their subconscious that once it is underlined (and also highlighted in color), it means they can click on it to go. But by highlighting ordinary text with underlining, you mislead the user and subsequently become disappointed with your resource (he thought it was, but it turned out that...).

The nuance in using the Css text-decoration rule is that you can enter three (or two) values at once for any Html element (omitting none) and as a result you will get underlined-underlined-crossed out fragment of text(sounds and looks cool, doesn’t it?):

Text-decoration:underline overline line-through;

Values for text decoration (if you want to use several of them at once) need to be written through a space character.

Vertical-align - vertical alignment

Next we have vertical alignment - vertical-align. For almost all elements in HTML code, it means aligning inline elements with text relative to their baseline. True, for this it means a little different - all the content that is in these cells will be aligned vertically.

For the CSS vertical-align rule, you can use the following values:

Lines are baseline aligned by default. Look, I applied increase the font size for this piece of text and these two fragments are aligned to the base (bottom) line. And vertical alignment using vertical-align is precisely intended to change the way lines are aligned.

For example, if I write vertical-align:baseline for the same enlarged piece of text, then no changes will occur, because the baseline value is used for this CSS rule by default.

By the way, you can also use numbers as values for it, and the inscription vertical-align:0 will mean the same thing as vertical-align:baseline, i.e. baseline is equivalent to zero. Therefore, if we want to indicate any shift in vertical alignment, then this shift will be specified relative to the baseline (or zero).

You can write it like this:

vertical-align:10px;

And we will receive shift the fragment with larger font up 10 pixels relative to the baseline. If we write a negative value:

Vertical-align:-10px;

Then we get shift fragment down relative to the baseline. From the examples it is clear that due to the shift, the height of the line increased so that the text fits in it without colliding with the adjacent line. The shift can also be specified in Em and Ex, and as a percentage, which will be calculated from the line height of this element (remember in the last article we learned how to set it using ).

To vertically align the contents of table cells, vertical-align should use the Top and Bottom values to respectively align the content to the top and bottom of the cell (well, middle in a table cell is used as the default vertical alignment value).

And for font elements you can use text-top, text-bottom, middle. Let's use it as an example this piece of text meaning:

vertical-align:middle;

What was the result? The middle line of the enlarged fragment is aligned with the baseline of the regular text, i.e. we got vertical alignment to the centerline. For text-top and text-bottom everything will be the same. This is text-top , and this is text-bottom .

The values of the Css property vertical-align sub and super correspond to the sub- and super-index that took place in pure Html (before using CSS properties for visual design).

Text-transform, letter-spacing, word-spacing and white-space

None is used by default and means that the characters in the text will not change in any way - as written in Html, this is how they will be displayed. The Uppercase value for text-transform will transform all letters in the fragment to capital letters ( an example is shown in this sentence, where the text-transform:uppercase rule was used, and the letters were originally written in lowercase).

The lowercase value for the Css text-transform rule will allow you to transform all characters in the fragment to lowercase, and the capitalize value will make all the first letters of the word capitalize ( example in this sentence- text-transform:capitalize). Those. using text-transform you can do anything you want with plain text, and then easily return everything back.

Therefore, if, for example, you have the task of making all headings written only in capital letters, then write them in Html as usual, and make them capital letters in CSS via text-transform:uppercase. Then, if you decide to change something back, you only need to make a small change to the styles, and not to the content of all 100,500 headers on your site.

By default, both letter-spacing and word-spacing are set to Normal, or this is the same as zero (i.e., the distance between characters and words does not change in any way). The amount of change in distance in these rules can only be specified in pixels, either Em or Ex, but not in percentages.

However, you can use both positive (sparseness of characters or words) and negative values (bringing characters or words closer together). For example, you can “this is how to thin out the characters in this phrase” using the following Css rule:

Letter-spacing:0.4em;

Or you can “this is how to bring the symbols in this phrase closer together” by using:

Letter-spacing:-1px;

The same can be said about word-spacing, with the only difference being that the distance will change between words, as, for example, in this phrase, using this CSS construct:

Word-spacing:4em;

Similarly, you can use negative values in word-spacing to reduce the distance between words.

Well, the last CSS rule for today, which allows you to format text in Html code in a certain way, is white-space. It is responsible for displaying whitespace characters on a web page that occurred when writing Html code.

As you remember from the article about, the browser, when parsing the code, combines all the spaces, line breaks and tabs into one single space, and breaks lines on the web page precisely according to the space characters that occurred in the code.

So, white space can take one of three values:

It is clear that the default value is Normal and in this case everything is displayed as I described just above. But when using the Pre value, we get a complete analogy with using, i.e. On the web page, the text will be displayed with all those extra whitespace characters that were present when writing the code, and the browser will no longer be able to make transfers using them.

Well, what's the meaning? nowrap It will simply prevent the browser from wrapping any whitespace characters it finds inside a fragment with the CSS rule white-space:nowrap. You can try how it all works yourself by creating a simple Html file and enclosing any piece of text in tags like this:

fragment of experimental text

Good luck to you! See you soon on the pages of the blog site