There are several values ​​for the css text alignment attribute.

There are 5 values ​​for the css text alignment attribute, namely: 1. "left", which means to arrange the text to the left; 2. "right", which means to arrange the text to the right; 3. "center" ", means to arrange the text to the middle; 4. "justify", to achieve the effect of aligning text on both ends; 5. "inherit", stipulates to inherit the value from the parent element.

text-align The (Text Alignment) attribute specifies the horizontal alignment of text within an element.

This attribute sets the horizontal alignment of text within block-level elements by specifying the point at which the line box is aligned. The value justify is supported by allowing user agents to adjust the spacing between letters and words in line content; different user agents may get different results.

Value	Description
left	Arrange text to the left . Default: determined by the browser.
right	Arrange the text to the right.
center	Arrange the text to the center.
justify	Achieve the effect of aligning text on both ends.
inherit	Specifies that the value of the text-align attribute should be inherited from the parent element.

Values ​​justify

The last horizontal alignment property is justify, which brings its own problems.

The value justify aligns both ends of the text. In justified text, the left and right ends of the text line are placed on the inner border of the parent element. Then, adjust the spacing between words and letters so that the lines are exactly equal lengths. You may have noticed that justified text is very common in the printing world. In CSS, however, a little more consideration is required.

It is up to the user agent, not CSS, to determine how justified text stretches to fill the space between the left and right borders of the parent element. For example, some browsers may only add extra space between words, while others may evenly distribute the extra space between letters (although the CSS specification specifically states that if the letter-spacing attribute is specified as a length value, "the user The agent cannot further increase or decrease the space between characters"). There are also user agents that may reduce space on certain lines, making the text more tightly packed. All of these practices can affect the appearance of the element and even change its height, depending on how many lines of text are affected by the user agent's alignment choices.

CSS also does not specify how hyphens should be handled (Note 1). Most justified text uses a hyphen to separate long words on two lines, thereby closing the gap between words and improving the appearance of the lines of text. However, since CSS does not define hyphen behavior, it is unlikely that user agents will hyphen automatically. As a result, justified text in CSS doesn't look as good in print, especially since the element may be too narrow to fit only a few words per line. Of course, it’s okay to use narrow design elements, but beware of the corresponding drawbacks.

Note 1: CSS does not specify how to handle hyphens because different languages ​​have different hyphen rules. Rather than attempt to reconcile such potentially incomplete rules, the specification simply ignores the issue.​

The above is the detailed content of There are several values ​​for the css text alignment attribute.. For more information, please follow other related articles on the PHP Chinese website!