CSS vertical-align attribute usage, cssvertical-align

CSS vertical-align attribute usage, cssvertical-align

The vertical-align attribute was used when I wrote a page css in the past two days, and the pitfall occurred during the use process. Therefore, the following is a summary:
Vertical-align Definition
Definition of vertical-align on W3C: vertical-align attribute sets the vertical alignment of elements. This attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located. The negative length value and percentage value can be specified. This reduces the number of elements rather than increases. In table cells, this attribute sets the cell content alignment in the cell box.

The text is usually aligned based on the invisible baseline, and the bottom of the letter is located above the baseline. The vertical-align attribute can be used to increase or decrease letters or images above or below the baseline of a text. Vertical-align attributes have the following values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, and. The initial values are baseline.
Baseline-align the baseline of the child element with the baseline of the parent element. For elements without baselines, such as objects, align the bottom of the element with the baseline of the parent element.

Sub (below) -- place an element below (subscript) to precisely align the baseline of an element with its parent element's preferred subscript position.

Super (above) -- place an element above (superscript) to align the baseline of an element with its parent element's preferred superscript position.

Text-top (top of the text) -- align the top of the element with the top of the top letter of its parent element.

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

Middle (middle) -- vertically center the element.

Bottom (bottom) -- align the bottom of the element with the bottom of the lowest thing in the row.
Text-bottom (bottom of the text) -- align the bottom of the element with the bottom of its parent element font.

Vertical-align
The definition of vertical-align on W3C can be divided into two parts:
First, let's look at the following sentence: "In the table cell, this attribute sets the alignment of the cell content in the cell box ." This is easy to understand. If you add a vertical-align: middle style to the td of a table, the content in the table is vertically centered. Similarly, if you give a vertical-align: bottom is aligned at the bottom. If a vertical-align: top is given, it is aligned at the top.

The second usage is as follows: "This attribute defines the vertical alignment of the baseline of the element in the row to the baseline of the row where the element is located ." I can't say anything in a professional language. It can be used as a metaphor: Assume that there are two elements a and B in the row, and both a and B are img. When a adds a vertical-align: middle style, the bottom (baseline) of B is aligned with the center position of a, for example:

If both a and B have a vertical-align: middle style, they are aligned with each other in the middle, that is, the midline alignment in the vertical direction, for example:

For example, if img and span appear together, you need to add img {vertical-align: middle;} to align the text in the middle of the image ;}
For example, when the input and span are connected, the default position of the span in Google Firefox IE8 or later versions is in the middle of the input. However, in ie6/ie7, the bottom of the span is aligned with the bottom of the input, the unified method is to add the input {vertical-align: middle;} to the input. to align them vertically to the midline, set span {vertical-align: middle ;}

Use of vertical-align
1. Used for inline Elements
The following uses vertical align as an example to describe how to use the vertical-align attribute.

Img {vertical-align: middle;} <div>  View my location </div>

2. Used for tables
The vertical-align attribute can be directly used for table cells. The effect is equivalent to the valign attribute in HTML.

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

3. Used for block elements
The vertical-align attribute is not applicable to block elements, which is why some people use the vertical-align attribute. However, we can use the display attribute to set its value to table-cell, convert block elements to cells, and then use the vertical-align attribute.

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

Note that the above method has compatibility issues. IE6/IE7 and IE-centered browsers such as window of the world, 360, and travel do not support this usage, but Chrome and Firefox do.
To be compatible with ie6/7, you can add the following attributes for div:

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

**

Note: vertical-align is only valid for intra-row elements and invalid for block-level elements.

**

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.