What values ​​can the text align property take. HTML text alignment center, width and indent

Hello, dear readers of the blog site. In this article, we continue to learn the basics of CSS styling and look at the vertical-align, text-align, text-indent and a few other properties for styling html text.

Text alignment with CSS

Let's start with the style attributes that control the display of text in block-level elements. Let's start with the text-align property, which is actually a replacement for the align attribute (used to align the content of html elements, such as p paragraphs).

style property text-align sets horizontal text alignment and has only four possible values:

The available values ​​of this rule determine the alignment, respectively: left - to the left, right - to the right, center - to the center and justify - to the width of the page (left and right at the same time by increasing the distance between words). For example, the text of this article is aligned to the width of the page (if you notice it has even borders on both the left and right sides) using the text-align:justify rule.

By default, horizontal alignment is left, so you don't need to specifically specify text-align:left unless other alignment was specified on the parent elements.

Property usage examples:

Next CSS property text-ident sets indent for red line, for example for text in a p paragraph tag. This rule, like text-align, only applies to block-level elements. Syntax:

Absolute and relative indent values ​​are allowed here. Absolute values ​​(px - pixels, em, ex, etc.) can be specified both with a plus sign and with a minus sign. The relative value is usually given as a percentage (%). The relative value is calculated from the width of the area that is reserved for the text. So, the css rule text-indent:50% will set the red line equal to half the length of this very line. By default, the "red line" indent is zero. Example:

Next, consider the vertical alignment property vertical-align. This property is already applicable for all html elements and for almost all means the alignment of inline elements with text relative to their baseline. In addition to the td and th table tags, in which all content will be vertically aligned. Syntax:

Let's look at each value in more detail:

• baseline - alignment of a piece of text along the baseline of the parent element. This is the default;
• sub - a text fragment is displayed as a subscript or subscript for the parent element;
• super - text fragment is displayed as superscript or superscript for the parent element;
• top - alignment of the text fragment to the top edge of the parent element;
• text-top - alignment of the fragment to the top edge of the text of the parent element;
• middle - alignment of the center of the text fragment to the center of the parent element;
• bottom - alignment of the text fragment to the bottom edge of the parent element;
• text-bottom - align the fragment to the bottom edge of the text of the parent element;

In the figure below, you can see the behavior of test fragments with different values ​​of the vertical-align property in the browser Internet Explorer 11:

In addition to the above values, you can specify numeric values. So the CSS rule vertical-align:0 would mean the same thing as the vertical-align:baseline entry. And the vertical-align:10px rule will move the text up 10 pixels from the baseline. To shift the text down, the value must be specified with a minus.

The shift can also be specified in relative units, such as em and ex, or as a percentage.

To vertically align the contents of the table cells in vertical-align, you should use the following values:

• top - to align the content to the top border of the cell;
• bottom - to align the content to the bottom border of the cell;
• middle - to align to the center of the cell (used by default).

To achieve the desired result, you usually have to experiment with different values ​​of the vertical-align style property. Numerous possible values ​​give too different results in different cases.

The white-space and word-wrap options that control line breaks

Next in line is the white-space parameter, which is responsible for displaying whitespace characters on the html page.

As we know, by default, the browser combines all consecutive whitespace characters: spaces, line breaks and tabs into one space. Exception pre tag, the text placed in it is displayed as is, with all spaces.

The white-space property has the following syntax:

It is clear that the normal value is used by default and leaves everything as described above, all consecutive spaces are combined into one and line breaks are set automatically.

Using the "pre" value would be a complete analogy when using the "pre" tag. The browser will render the page with all extra spaces and hyphens as they were added by the developer. If the line of text is too long, a horizontal scroll bar will be added.

The nowrap value prevents the browser from wrapping lines and the text is displayed as a single line. The only thing is that adding the "br" tag will allow you to wrap the text on a new line.

The pre-wrap value preserves all sequences of spaces and line breaks, but if the line does not fit in the specified area, then the browser automatically wraps the text on a new line.

Well, the pre-line value converts spaces to one space, newlines are preserved and the browser may break too long lines to avoid horizontal scrolling.

Usage example:

Next, consider word-wrap parameter, which prompts you to specify whether to transfer or not long words, which do not fit in the given area. This property is not often used, but sometimes you can not do without it:

word-wrap: normal|break-word

The normal value tells the browser that the text can only break on spaces, and this is normal browser behavior. And the break-word value allows the browser to insert line breaks inside words. Example:

Text shadow options - text-shadow property

For lovers of various embellishments in the CSS3 standard, it became possible to set a shadow for text. Proper use of the text-shadow property allows you to noticeably revive web page. Syntax:

The value none disables adding a shadow to the text and is set by default.

Shadow color is set in any available CSS format and is an optional parameter. By default, the shadow color is the same as the text color.

Horizontal shadow offset can be set in any supported CSS unit. A positive value will place the shadow to the right of the text, a negative value will position the shadow to the left. Zero value will position the shadow just below the text and only makes sense if shadow blur is set.

Shadow vertical offset can also be set in any supported CSS unit. A positive value will move the shadow below the text, a negative value will move it higher. A value of zero will position the shadow directly below the text.

In any unit of measurement, and shadow blur radius. The larger this value, the wider the shadow becomes and the more it smoothes. If this option is not set, the blur value is assumed to be zero. Since the smoothing algorithm usually has different browsers is different, the appearance of the shadow may be slightly different depending on the browser.

HTML tags defining text alignment, indentation

Justified text used in typography

The example below shows how to align text to width pages:

The justify value provides uniform text alignment right and left, that is in width. This method is widely used in print.

Aligning text in HTML to center and justify

Align text in HTML to center, text to the right:

Result:

Attributes and values

• align="left" - defines left text alignment(default).
• align="center" - aligns text to the center.
• align="right" aligns text to the right.

Alignment | HTML text indent

HTML text and its indent on the left of the page

Let's produce text indent on the left in two ways:

Result:

View in a new window.

Sets the alignment of the last line of a block of text.

short information

Notation

Values

auto Matches the alignment specified by the text-align property, except for the value justify . For it, the alignment will be like start . start The line is aligned to the start edge of the block, which can change depending on the direction of the text (left to right or right to left). end The line is aligned with the block's end edge, which is determined by the direction of the text. left The string is left-aligned. right The string is right-aligned. center The string is centered. justify The string is justified in width. If there is only one word in the last line, then it will be left-aligned.

Influence different values the position of the text is shown in Table. one.

Meaning	alignment	Type of text
left	Left
right	Right
center	Centered
justify	By width

Sandbox

Winnie the Pooh was always not averse to a little refreshment, especially at eleven o'clock in the morning, because at that time breakfast had long since ended, and dinner had not even thought of starting. And, of course, he was terribly glad to see that the Rabbit took out cups and plates.

div ( text-align-last: start ; )

Example

Object Model

An object.style.textAlignLast

Note

Internet Explorer and Edge do not support start and end values.

Firefox prior to version 49 supports the -moz-text-align-last property.

Specification

Each specification goes through several stages of approval.

• Recommendation (Recommendation) - the specification is approved by the W3C and recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but the support of the development community is required to implement the standard.
• Proposed Recommendation ( Suggested recommendation) - at this stage, the document is submitted to the W3C Advisory Board for final approval.
• Working Draft - A more mature draft after discussion and amendments for community review.
• Editor's draft ( Editorial draft) is a draft version of the standard after changes have been made by the project editors.
• draft ( Specification draft) is the first draft version of the standard.

Typically, the site creator decides which letters will be uppercase and which lowercase, based on spelling rules and their own preferences. However, the process of changing the case of characters can be automated using the property text-transform. This property can take four values:

• none - the text is written without changes;
• capitalize- each word will start with a capital character;
• lowercase - all characters become lowercase (lowercase);
• upper case- all characters become capital (upper case).

For example, the following rule specifies that the H1 heading should be in capital letters:

H1 (text-transform: uppercase;)

It is convenient to set automatic character case change for abbreviations, element names, headings, and others. text elements, where you want to write in uppercase or lowercase characters.

Text decoration: text-decoration property

Property text-decoration allows you to set the text additional design. Values given property are constants none, underline, overline, line-through and blink, which let you display normal text, draw a line above, below, or through text, or make text blink. An example of using different values ​​of this property is shown in Figure 11.4.

Rice. 11.4.

The most common application of the property text-decoration is to change the default link underlining. For example, the following rule specifies that links should be underlined:

A:link (text-decoration: underline;)

Word spacing: word-spacing property

To set the spacing between words in text, use the word-spacing property. The value of this property can be set using keyword normal , which is the default and sets the standard spacing for the current font. To set the interval, in addition to the standard one, you can specify a value in any available CSS units, and the value can be negative.

So, the following rule increases the spacing between words in the H1 heading by 1em :

H1 (word-spacing: 1em;)

Text alignment: the text-align property

Alignment refers to placing the left or right edge of a block of text along an invisible vertical line. The text-align property is used to align text. Valid values ​​for this property are left, right, center, and justify , which specify left, right, center, and justify alignment, respectively.

The following rule sets the center alignment of all elements contained within a DIV element:

DIV (text-align: center;)

Leading: the line-height property

Leading is the distance between baselines of closely spaced lines. Under normal circumstances, line spacing depends on the type and size of the font and is automatically determined by the browser. But this value can be changed using the line-height property. The default value of normal causes the browser to calculate line spacing automatically. Any number greater than zero is taken as a multiplier of the font size of the current text. It is also possible to use any length units accepted in CSS as values ​​for this property. It is also allowed to use a percentage notation, in which case the font height is taken as 100%. Negative line spacing is not allowed.

Letter spacing: the letter-spacing property

The browser automatically selects character spacing based on font size and type. In some cases, it is necessary to correct the spacing between letters. The letter-spacing property is used to control letter spacing. Any CSS length units can be used as values ​​for this property, but it is recommended to use relative units based on font size (em and ex). Unlike line spacing, the letter-spacing property allows a negative value, but in this case, you need to make sure that the readability of the text is preserved.

The following rule increases the spacing between characters in the H1 header by 0.5em .

Hello, dear readers of the blog site. Today we continue to study and we are next in line text-decoration properties, vertical-align, text-align, text-indent and a number of others that help shape the appearance of texts in Html code.

In the last article, we looked at properties that are intended to be configured appearance fonts at .

Well, even earlier, we examined 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 values:

The meaning remains the same as it was before. text align is the horizontal alignment of the lines. This rule applies only to block elements (paragraphs, headings, etc.), i.e. those tags in which multiple lines can appear. Because there can be only one line in inline elements, then there is no special point in using text-align in them.

It is clear that the values ​​of this rule mean alignment, respectively: left (left), right (right), center (center) and page width (Justify - both 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 a few lines of text, otherwise there will be no visible effect from this.

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

text-align:justify;

By default, text is horizontally aligned to the left, i.e. You don't 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 good example, but here, I think, everything is clear anyway.

Next css rule text indent allows you to set a red line, for example, for text in a paragraph tag P. The indent of the red line can be set by specifying a value (both with a plus sign and with a minus sign, using ) or using a percentage:

What are percentages from in text-indent? From the width of the area that is reserved for the text. Those. The css rule text-indent:50% will set the red line to half the length of that line. Well, this paragraph is just an example of such a rule.

And you can, for example, set a negative value for the red line in text-indent and then we will get something like what you see in this paragraph. For achievement given result I wrote the following CSS rule for the P paragraph tag:

text-indent:-1em;

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

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

It can only have four meanings:

Those. can be used with text-decoration: overline (overline), strikethrough (line-through) or underline (underline), well, or use nothing at all (none). Some Html elements already have default styling horizontal line, for example (they are underlined by default).

Therefore, highlighting something else with an underline (except for hyperlinks) is not good, because users have a subconscious record that once it is underlined (and also highlighted in color), then you can click on it to go. But by underlining plain text, you are misleading the user and subsequent disappointment with your resource (he thought that, but it turned out to be ...).

The nuance in using the Css text-decoration rule is that it will be possible to write three (or two) values ​​at once for any Html element (omitting none) and as a result you will get underline-underline-strikethrough piece 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 the 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:

Rows are aligned to the baseline by default. Look, I applied to this piece of text increase the font and these two fragments are aligned on the base (bottom) line. And vertical-aligning with vertical-align is just for changing 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 default Css rule.

By the way, numbers can also be used as values ​​for it, and vertical-align:0 will mean the same as vertical-align:baseline, i.e. the value of baseline is equivalent to zero. Therefore, if we want to specify any shift in vertical alignment, then this shift will be indicated relative to the baseline (or zero).

You can write like this:

vertical-align:10px;

And we get shift fragment with enlarged font up 10 pixels from the baseline. If we write a negative value:

vertical-align:-10px;

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

To vertically align the contents of table cells in vertical-align, use the Top and Bottom values ​​to get the top and bottom of the cell, respectively (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 an example for this piece of text meaning:

vertical-align:middle;

What happened as a result? The middle line of the enlarged fragment was aligned along the baseline of the plain text, i.e. we got vertical alignment on the midline. For text-top and text-bottom everything will be the same. Like text-top , and like text-bottom .

The vertical-align sub and super Css values ​​match the sub- and superindex values ​​that would have been in pure Html (before CSS properties were used for visual styling).

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, they will be displayed. The value Uppercase for text-transform will transform all the letters of the fragment into uppercase ( 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 the characters of the fragment into lowercase, well, the capitalize value will make all the first letters of the word capitalized ( example in this sentence- text-transform:capitalize). Those. with text-transform, you can do anything with plain text, and then easily return everything back.

Therefore, if you, for example, have the task of making all headings written only in capital letters, then write them in Html as usual, and make them capitalized already in CSS via text-transform: uppercase. Then, if you decide to change something back, it is enough to make only a small change in the styles, and not in the content of all 100,500 headings 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 spacing between characters and words does not change in any way). The magnitude of the distance change in these rules can only be indicated in pixels, or Em or Ex, but not in percentage terms.

However, both positive (character or word sparsity) and negative values ​​(character or word convergence) can be used. For example, you can "like this, sparse the characters in this phrase" with the following css rule:

Letter-spacing:0.4em;

Or is it possible “this is how to bring the characters together in this phrase” by using:

Letter-spacing:-1px;

The same can be said about word-spacing with only one difference, that in this case the distance will change already between words, as, for example, in this phrase, with the help of such a CSS construction:

Word-spacing:4em;

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

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

As you remember from the article about, when parsing the code, the browser combines all spaces, line breaks and tabs into one single space, and wraps lines on the web page exactly according to the whitespace characters that took place 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 complete analogy using , i.e. on the web page, the text will be displayed with all those extra whitespace characters that took place when writing the code and the browser will not be able to hyphenate them.

Well, the meaning nowrap will simply prevent the browser from wrapping on those whitespace characters that it finds inside the fragment with 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 similar tags:

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

You may be interested

List style (type, image, position) - Css rules for customizing the appearance of lists in Html code
Positioning with Z-index and CSS Cursor rule to change the mouse cursor
Padding, Margin and Border - we set in CSS inner and outer paddings, as well as borders for all sides (top, bottom, left, right)
What is CSS for, how to connect cascading style sheets to html document and basic syntax of this language
Float and clear in CSS - block layout tools
CSS - what is it, how cascading style sheets are connected to html code with Style and Link
Size Units (Pixels, Em and Ex) and Rule Inheritance in CSS
Tag, class, Id, and universal selectors, as well as attribute selectors in modern CSS
Position (absolute, relative and fixed) methods Positioning Html elements in CSS (left, right, top and bottom rules)
Background in CSS (color, position, image, repeat, attachment) - all for setting background color or background image Html elements

The most interesting:

Screen camera Make sure the camera is connected windows 10

Best Software to Automatically Update Windows Drivers

How to make money on a YouTube channel: the secrets of YouTube stars