[CSS Supplemental vertical-align] knowledge points for vertical-align (alignment) supplements in CSS

7.4.1   Grammar

The list of specific definitions for the Vertical-align property is as follows:

Syntax: Vertical-align:baseline | Sub | Super | Top | Text-top | Middle | Bottom | Text-bottom | < percent > | < length > | Inherit
Description: Set the vertical alignment of element content
Value: Baseline: Baseline alignment; Sub: subscript; super: superscript; top: top align; Text-top: Align with top of text, middle: Middle Align, bottom: bottom align; text-bottom: bottom of text;
Percent and Length: CSS2, can be negative.
Initial value: Baseline
Inheritance: Do not inherit
Applies to: inline element and cell (Table-cell) elements
Media: Visual
Calculated values: The percent and length values are absolute lengths; other same specified values

It is important to note that the vertical alignment property is only valid for inline elements . For example, the following code is available:

<p style= "Vertical-align:super;" > Vertical Alignment <span> superscript </span></p& gt;

The <p> element defaults to block-level elements, so there will be no changes when browsing within the browser. And the following code:

<p> Vertical alignment <span style= "Vertical-align:super;" > Superscript </span></p>

The <span> element defaults to inline elements, so the display is shown in 7-35.

Figure 7-35 Vertical Alignment properties are only valid for inline elements

Inline elements also include pictures, form input elements, and so on, while vertical alignment cannot be inherited.

7.4.2 attribute value Detail

In the [7.3 Row High Line-height] section, the baseline, top line, midline, and bottom line of the text were introduced, as well as the content area, inline box, and Line box, while the vertical alignment of this section is closely related to these concepts.

The vertical alignment of the primary property value is shown in form 7-36.

personal page CreationCSS TutorialsExcellent web designApp Development Quotes

Figure 7-36 The main property values for vertical alignment

(1). Baseline Alignment (Vertical-align:baseline)

Baseline Alignment (Vertical-align:baseline) aligns the baseline of the element's baseline of the half element, for example with the following code:

P Strong {
Line-height:7em;
Font-size:2em;
Vertical-align:baseline;
}

<p> Baseline Alignment <strong>vertical-align:baseline;</strong></p>

The display is shown in 7-37.

Figure 7-37 Baseline Alignment

An element such as a picture or an input box has no baseline of its own, and the baseline of its bottom half is aligned, as shown in 7-34.

(2). Top Alignment (vertical-align:top)

The top alignment (vertical-align:top) aligns the top of the inline box of an element with the top of the row box, for example with the following code:

p {
Line-height:7em;
}
P Strong {
Vertical-align:top;
Line-height:2em;
}
P img {
Vertical-align:top;
}

<p> Top alignment: <strong>vertical-align:top;</strong></p>

The display is shown in 7-38.

Figure 7-38 Align Top

For the <strong> element, not only the vertical-align is set, but also the line-height, which is explained in the description of the inline box in the section [7.3.2 content area, inline box, and Row box] in this chapter, where row heights can change the height of the inline box. If you do not reset the row height, the <strong> element inherits the parent element <p> row height, so the height of the inline box and the row box are the same, and the top alignment will not see the effect.

(3). text top align (vertical-align:text-top)

The text top alignment (vertical-align:text-top) aligns the top of the text line with the top line of the element's inline box, such as the following code, shown in 7-39.

p {
Line-height:7em;
}
P Strong {
Vertical-align:text-top;
Line-height:2em;
}
P img {
Vertical-align:text-top;
}

<p> text top align:<strong> vertical-align:top;</strong></p>

Figure 7-39 Align Top of text

(4). Bottom Alignment (vertical-align:bottom)

The bottom alignment (Vertical-align:bottom) is opposite to the top alignment (Vertical-align:top), as shown in 7-40.

Figure 7-40 Bottom Alignment

(5). text bottom align (vertical-align:text-bottom)

The text bottom alignment (vertical-align:text-bottom) is aligned to the top of the text (Vertical-align:text-top), as shown in 7-41.

Figure 7-41 Text Bottom Alignment

(6). Center Alignment (vertical-align:middle)

Middle Alignment (Vertical-align:middle) is typically used on a picture to align the centerline of the vertical direction of the picture with the midline of the line of text, such as the XHTML code as shown in 7-42.

P img {vertical-align:middle;}

<p> Center alignment 0.5ex above baseline </p>

Figure 7-42 Alignment in the middle

The midline is defined as: The midline is above the baseline, and the distance from the baseline is half of the lowercase x height (that is, ex), as shown in 7-36. Whereas ex is associated with font size, most browsers think 1ex = 0.5em, so the baseline above One-fourth em is aligned as the midline.

Note: As with the difference in line height display, there is a slight difference between the browsers in the middle alignment.

(7). superscript and subscript

Superscript (vertical-align:super) causes the baseline of the element (the bottom of the replacement element) to rise relative to the parent element's baseline, and the subscript (vertical-align:sub) lowers the baseline of the element, which is not specified in the moving amplitude CSS specification and is determined by the browser. For example, the following code is shown in 7-43.

<p> superscript text <span style= "Vertical-align:super;" >vertical-align:super;</span> subscript text <span style= "VERTICAL-ALIGN:SUB;" >vertical-align:sub;</span></p>

Figure 7-43 Superscript and subscript

The superscript does not change the size of the element text.

(8). length values and percentages

Similar to the superscript, the length and percent values cause the baseline of the element (the bottom of the replacement element) to rise (positive) or lower (a negative value) relative to the parent element's baseline.

The moving dimensions of the index are determined by the browser, and the length value or percentage can be used to precisely control the amplitude of the text moving up and down.

The percentage is related to row height, such as the following code, which is shown in 7-44.

p {line-height:2em;}

<p> line Height 2em, vertical percentage alignment: <span style= "vertical-align:100%;" >100% positive upward </span>, while <span style= "vertical-align:-100%;" >-100% negative numbers down & lt;/span>. </p>

Figure 7-44 Alignment of percentages

Setting vertical alignment affects the height of the row box, such as the following code, which is shown in 7-45.

p {line-height:2em;}

<p> Vertical alignment <span style= "VERTICAL-ALIGN:2EM;" > Positive upward </span& gt, while <span style= "VERTICAL-ALIGN:-2EM;" > Negative down </span>. &lt; P&gt; line height is 2em, while vertical aligned text is set to open the Line box. </p>

Figure 7-45 Effect of vertical alignment on a row box

Note: Setting a percentage or value alignment in IE can cause clutter in the content, as shown in 7-46.

Figure 7-46 Setting a percentage or value alignment in IE

 

[CSS Supplemental vertical-align] knowledge points for vertical-align (alignment) supplements in CSS