Horizontal alignment (Text-align) that is used to set the horizontal alignment of text within an element.
1. Grammar
Text-align specific parameters are as follows:
Syntax: Text-align:left | Right | Center | Justify
Description: Sets the horizontal alignment of text within an element.
Parameters: Left: right-aligned; right: right-aligned; center: centered; Justify: justified
Initial value: related to Browser settings
Inheritance: Inheritable
Apply to: Block element
Its parameters are displayed in the browser as shown in Figure 1.
Figure 1 Horizontal alignment
The first three alignments are well understood, and the final alignment (text-align:justify) makes the text look neat, but the justification for the alignment may vary depending on the browser, as shown in Figure 2.
Figure 2 different browsers for two-sided alignment
2. Apply to: Block element
The Text-align property is only valid for block element settings. For example, there are the following settings:
<p style= "text-align:right;" ></p>
Although the picture is centered, the effect in the browser is shown in Figure 3.
Figure 3 Picture and alignment
The reader can see from Figure 3, because picture defaults to inline elements, so even if "text-align:center" is defined, it is still aligned to the right with the text. Therefore, the image can not be directly set to achieve the alignment of individual pictures.
If you want a single picture to be centered, you should nest a block element outside, and then set the alignment of the element to center, as follows:
<p style= "Text-align:center;" ></p>
The effect is shown in Figure 4.
Figure 4 Center Picture
3. The nature of inheritance
The Text-align property is inheritable. When the horizontal alignment of an element is set, the horizontal alignment of its descendants ' elements will inherit the setting, as shown in Figure 5.
Fig. 5 Inheritance of Text-align
Note: There is a slight difference in inheritance between different browsers. For example, in opera, the table header will not inherit right alignment, but still center, unless it is specifically defined.
Because of the inheritance of the Text-align attribute, it is necessary to pay special attention when defining that if the descendant elements do not want to inherit horizontal alignment, they need to be defined separately.
4. Application: Whole Center
Although Text-align is used to set the horizontal alignment of text. In IE, however, alignment applies to all descendants in this element, such as the following code:
<div id= "TextAlign3" style= "Text-align:center;" >
<p style= "width:70%;" > This paragraph will be centered in IE, while Firefox and Opera are displayed on the left. </p>
</div>
The effects shown in Windows IE 6.0, Firefox 2.0, and opera 8.5 are shown in Figure 6.
Figure 6 Differences in different browsers
Readers can see that
The element itself is also centered, so you can use this attribute to set the overall center of the page content within IE, such as the following HTML structure:
<body>
<div id= "wrap" >&NBSP;
&NBSP;
<p> Set CSS to center the page overall. </p>&NBSP;
</div>
</body>
to have the <div id= " wrap" > centered in the browser, you need to set the CSS as follows: &NBSP;
body {
text-align: center ; /* in IE center */&NBSP;
}
#wrap {&NBSP; The
width: 90%; /* sets the width to show the center effect. */&NBSP;
margin: 0 auto; /* Center in browsers such as Firefox and Opera. */&NBSP;
}
At this point, the elements within the page will be centered, as shown in Figure 7.
Figure 7 The overall center of the page in the browser
Note: At this point, all the text in the page is inherited by the set and centered, so in practical application, you can set the wrap layer alignment to the left-aligned.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
