Text Vertical AlignmentRow height
The Line-height property is the distance between the baseline of the text line, not the size of the font, which determines how much the height of each element box increases or decreases. Line-height controls the line spacing, which is an extra space between lines of text that exceeds the font size. In other words, the difference between the Line-height value and the font size is the line spacing.
When applied to a block-level element, Line-height defines the minimum distance between the text baselines in the element. Note that it defines the minimum distance, not an absolute value, and the text baseline may be larger than the line-height. Line-height does not affect the layout of the replacement element, but it does apply to the replacement element.
Structuring the line of text
- Inline box
Each element in the text line generates a content area, which is determined by the size of the font. This content generates an inline box, and if there are no other factors, the inline box is exactly equal to the element's content area. The line spacing generated by Line-height is one of the factors that increase or decrease the height of the inner frame of each row. To determine the line spacing for a given element, you only need to subtract the computed value of the line-height from the computed value of font-size. This value is the total line spacing. The line spacing may be negative. Line spacing is divided by 2, and half of the spacing is applied to the top and bottom of the content area respectively. The result is an inline box for that element.
- Line box
Once all the inline boxes have been generated for a given line of content, these inline boxes are taken into account in the construction of the row box . The height of the row box is exactly enough to contain the top of the top and bottom inline boxes of the highest inline box.
- Specify the Line-height value
Line-height if the default value of normal is taken, the user agent must calculate the vertical space between the rows. The values calculated by different user agents may vary, but are usually 1.2 times times the size of the font , which makes the line box higher than the font-size value of the given element.
Row Heights and inheritance
When a block-level element inherits Line-height from another element, the problem becomes more complex. When the Line-height value is inherited from the parent element, it is calculated from the parent element instead of the child element.
body {font-size:10px;} div {line-height:1em;} p {font-size : 18px} <div> <p> 这段文字从div继承了line-height，div的字体大小时10，所以计算出来的大小是10px。 </p> </div>
One way to solve this problem is to set the scaling factor, which will be an inherited value instead of a computed value. This number is applied to the element and all its child elements, so each element calculates the line-height according to its own font-size.
body {font-size : 10px;} div {line-height : 1.5;} p {font-size:18px;}
Although it appears that line-height evenly allocates extra space above and below each line of text, it is actually an increase (or decrease) in the number of elements in the row at the top and bottom of the content area to create an inline box.
Vertically align the book
In CSS, the Vertical-align property applies only to inline elements and to replacement elements, like and form input elements. The Vertical-align property cannot be inherited.
Vertical-align accepts only 8 keywords, a percentage number, or a length value.
- Baseline alignment
Baseline requires that the baseline of an element be aligned with the baseline of its parent element. If a vertical alignment element has no baseline, than the slice input box, then the lower end of the element is aligned with the baseline of its parent element.
This alignment rule is important because it allows some Web browsers to always place the bottom edge of the replacement element on the baseline, even if there is no other text in the row. For example, suppose that there is only one image in a table cell. This image may actually be on the baseline, but in some browsers, the space underneath the baseline causes a gap to appear underneath the image. Other browsers will "compact" the image in the table cell, so there is no blank space.
- Superscript and subscript
The vertical-align:sub declaration causes an element to be subscript, which means that its baseline (or, if it is a replacement element, its low end) is lowered relative to its parent element's baseline. The specification does not define the distance that the element reduces, so the distance may vary for different user agents. Super sub opposite, raised relative to parent baseline.
Sub and super do not change the element font size, and all text in the subscript or superscript element should default to the same size as the text in the parent element.
- Align Bottom
Bottom aligns the lower end of the element's inline box with the lower end of the line box.
Text-bottom refers to the bottom of the inline text. Replacing an element or any other type of non-text element ignores this value. For these elements (substitution elements or non-text elements), a "Default" text box is considered. This default box is obtained by the font-size of the parent element. The bottom of the inline box of the element you want to align is then aligned with the bottom of the default text box.
- Top Align
Top and bottom In contrast, text-top and Text-bottom opposite
- Center Alignment
Middle are often (not always) applied to images. Middle aligns the midpoint of the inline element box to a point at 0.5ex above the parent element baseline, where 1EX is defined relative to the font-size of the parent element. Because most user agents treat 1ex as 0.5em,middle, the vertical midpoint of an element is often aligned with a point at 0.25em above the parent element baseline. However, some browsers do calculate accurate x-height.
- Percentage
Using percentages, the baseline of the element (or the bottom edge of the replacement element) is raised or lowered relative to the base of the parent element (the percentage you make is calculated as the percentage of the element line-height, not the line-height of its parent element). The positive increases and the negative decreases.
- Length Alignment
It raises or lowers an element by a specified distance, as compared to the prior alignment. To realize that vertically aligned text does not become part of another line, it does not overwrite text in other lines. All vertically aligned elements affect the row height. You should remember the description of the line box, which is high enough to contain the top of the top row box and the low end of the bottom inline box. This includes inline boxes that rise or fall due to vertical alignment.
CSS Row Height and alignment
