A detailed description of the use of attribute vertical-align in CSS

Definition of Vertical-align

Definition of vertical-align on a world-class basis: The Vertical-align property sets the vertical alignment of the element. This property defines the vertical alignment of the baseline of the element within the row relative to the baseline of the row where the element is located. Allows you to specify a negative length value and a percent value. This causes the element to be lowered rather than raised. In a table cell, this property sets the alignment of the cell contents in the Cell box.

Text is usually aligned against an invisible baseline, while the bottom of the letter is above the baseline. The Vertical-align property can raise or lower letters or images above or below the baseline of text. The values of the Vertical-align property are baseline, sub, super, top, text-top, middle, bottom, text-bottom, and so on, where the initial value is baseline.

Baseline (baseline)-aligns the baseline of the child element with the baseline of the parent element. For elements without baselines, like or objects, align the bottom of it with the baseline of the parent element.

Sub (below)-places the element below (subscript), or, rather, aligns the element's baseline to the preferred subscript position of its parent element.

Super (top)-places the element above (superscript), or, rather, aligns the element's baseline to the preferred superscript position of its parent element.

Text-top (top of text)-aligns the top of the element with the top of its parent element's highest letter.

Top--aligns the top of the element with the top of the highest thing in the row.

Middle (middle)--centers the elements vertically.

Bottom (bottom)-aligns the bottom of the element with the bottom of the lowest thing in the line.

Text-bottom (bottom of text)-aligns the bottom of the element with the bottom of its parent element's font.

The interpretation of Vertical-align

The definition of vertical-align on the world broad, can be broadly divided into two parts:

First, look at the following sentence. In table cells, this property sets the alignment of the cell contents in the Cell box. "It's easy to understand that if you add a vertical-align:middle style to a table TD, the contents of the table will be vertically centered, and the same if a vertical-align:bottom will be aligned at the bottom, If a vertical-align:top is given, it will be aligned at the top.

The second usage, look at the previous page, "This property defines the vertical alignment of the baseline of the element within the row relative to the baseline of the row where the element is located. "Professional language I'm not going to say it, I can make a metaphor: assuming that two rows of elements a and b,a and B are IMG, when a adds a vertical-align:middle style, the bottom (baseline) of B is aligned to the middle position of a, such as:

If both A and B have a vertical-align:middle style, they align each other's middle position, i.e. they align in the vertical centerline, such as:

For example, IMG and span appear together, in order to align the text to the middle of the picture, you need to add img{vertical-align:middle to the image;}

Again, such as input and span, Google Firefox IE8 above version of the default is span in the middle of input, but ie6/ie7, span bottom and input bottom alignment, to achieve a unified approach is to add the input input{ Vertical-align:middle, if you want to align the midline in their vertical direction, also set span{vertical-align:middle for span;}

Use of Vertical-align

1. For inline elements

The following is an example of the use of the Vertical-align property in the vertical alignment of the image.

img{Vertical-align:middle;} <div> Take a look at my location </div>

2. For tables

The Vertical-align property can be used directly in table cells, and the effect is equivalent to the Valign property in HTML.

td{height:40px; vertical-align:middle;} <table><tr><td> This is a test </td><td> this is a test </td></tr><tr><td> This is a test </td><td> this is a test </td></tr></table>

3. For block elements

The Vertical-align property is not applicable to block elements, which is why some people use the Vertical-align property for invalid reasons. But we can use the Display property, set its value to Table-cell, convert the block element to a cell, and then use the Vertical-align property.

div{width:500px; height:200px; border:1px blue solid; display:table-cell; vertical-align:middle;} <div></div>

It is important to note that there is a compatibility issue with this approach. Ie6/ie7 and IE as the core browser such as the World window, 360, roaming and other browsers do not support this usage, and Chrome, Firefox can support.

To be compatible with IE6/7, you can add the following properties for Div

Div{*display:block; *font-size:175px;/* height is 200px,  then 200*0.873 about 175px* Open/  }