Syntax: text-align: left | right | center | justify
Description: sets the horizontal alignment of the text in the element.
Parameter: left alignment; right: right alignment; center: center; justify: both ends alignment
Initial value: related to browser settings
Inheritance: it can be inherited.
Applicable to: block elements
| Default value: |
If the direction attribute is ltr, the default value is left; if the rtl ction attribute is rtl, the value is right. |
| Inheritance: |
Yes |
| Version: |
CSS1 |
| JavaScript syntax: |
Object. Style. textAlign = "right" |
The parameters are displayed in the browser, as shown in Figure 1.
Figure 1 horizontal alignment
The first three alignment methods are well understood, while the last two-end align: justify can make the text of a large segment look neat, however, the alignment between the two ends may vary depending on the browser, as shown in figure 2.
Figure 2 different expressions of different browsers on the two ends of alignment
2. Applicable to: block elements
The text-align attribute takes effect only when it is set for the block element. For example, the following settings are available:
<P style = "text-align: right;"> </p>
Although the center alignment is set for the image, the effect in the browser is shown in figure 3.
Figure 3 image and alignment
As shown in figure 3, even if "text-align: center;" is defined as "text-align: center;", the image is still right aligned with the text. Therefore, you cannot directly align an image by setting it.
If you want to center a single image, you should nest a block element outside of it, and set the alignment of this element to center alignment, as shown below:
<P style = "text-align: center;"> </p>
The effect is shown in figure 4.
Figure 4 Center
3. Inheritance
The text-align attribute can be inherited. After the horizontal alignment of an element is set, the horizontal alignment of its child element inherits this setting, as shown in figure 5.
Figure 5 inheritance of text-align
Note: The Inheritance of different browsers varies slightly. For example, in Opera, the header <th> does not inherit the right alignment, but is still centered and alignment, unless otherwise specified.
Due to the inheritance of the text-align attribute, you must pay special attention to the definition. If child elements do not want to inherit the horizontal alignment, you need to define them separately.
4. Application: Centered
Although text-align is used to set the horizontal alignment of text. However, in IE, alignment applies to all child elements in this element, for example, the following code:
<Div id = "textAlign3" style = "text-align: center;">
<P style = "width: 70%;"> This section is centered in IE and left in Firefox and Opera. </P>
</Div>
The results displayed in Windows IE 6.0, Firefox 2.0, and Opera 8.5 are shown in figure 6.
Figure 6 differences between different browsers
As you can see, the <p> element is displayed in the center, so you can use this feature to set the overall Center effect of the page content in IE. For example, the html structure is as follows:
<Body>
<Div id = "wrap">
<H1> center the page <P> set CSS to center the entire page. </P>
</Div>
</Body>
To center <div id = "wrap"> in the browser, set the CSS as follows:
Body {
Text-align: center;/* center in IE */
}
# Wrap {
Width: 90%;/* set the width to show the center effect. */
Margin: 0 auto;/* centered in Firefox, Opera, and other browsers. */
}
When you browse in the browser, all the elements on the page are displayed in the center, as shown in Figure 7.
Figure 7 center the page in the browser
Note: At this time, all the text on the page inherits the setting of <body> and is displayed in the center. Therefore, in actual application, you can set the alignment of the wrap layer to left alignment.
