Usage of CSS vertical-align attribute_html/css_WEB-ITnose

I used the vertical-align attribute when writing a page css in the past two days. I stepped on a pitfall during the use, so I summarize it as follows:
The definition of vertical-align
W3C on Definition of vertical-align: The vertical-align attribute sets the vertical alignment of an element. This property defines the vertical alignment of the baseline of an inline element relative to the baseline of the row in which the element appears. Allows specifying negative length values ​​and percentage values. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell contents in the cell box.

Text is usually aligned based on an invisible baseline, with the bottom of the letters 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 attribute include baseline, sub, super, top, text-top, middle, bottom, text-bottom, etc., where the initial value is baseline.
baseline (baseline)?? Align the baseline of the child element with the baseline of the parent element. For elements without a baseline, such as images or objects, align their bottom with the baseline of the parent element.

sub (below)?? Place the element below (subscript), specifically aligning the element's baseline with the preferred subscript position of its parent element.

super (above)?? Position the element above (superscript), specifically aligning the element's baseline with its parent element's preferred superscript position.

text-top?? Aligns the top of the element with the top of the highest letter of its parent element.

top Aligns the top of the element with the top of the tallest thing in the row.

middle (middle)?? Centers the element vertically.

bottom (bottom) Aligns the bottom of the element with the bottom of the lowest thing in the row.
text-bottom (text bottom)??Aligns the bottom of the element with the bottom of its parent element's font.

Interpretation of vertical-align
The definition of vertical-align on W3C can be roughly divided into two parts:
For the first usage, first look at the following sentence "In table cells , this attribute will set 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 will be vertically centered. Similarly, if If you give a vertical-align:bottom, it will be aligned at the bottom. If you give a vertical-align:top, it will be aligned at the top.

For the second usage, read the sentence on the previous page: "This attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the line where the element is located." I don't know how to speak professional language, so I can give you an analogy: Suppose there are two inline elements a and b. Both a and b are img. When a is added with a vertical-align:middle style, the bottom (baseline) of b will be aligned with the middle position of a, as shown below:

If both a and b add a vertical-align:middle style, then they will be aligned with each other's middle position, that is, their midlines in the vertical direction will be aligned, as shown below:

For example , img and span appear together. If you want the text to be aligned in the middle of the image, you need to add img{vertical-align:middle;}
to the image. For another example, when input and span are used together, the default in Google Firefox IE8 and above is The span is in the middle of the input, but in ie6/ie7, the bottom of the span is aligned with the bottom of the input. The way to achieve unification is to add input{vertical-align:middle;} to the input. If you want their vertical midlines to be aligned, both Also set span{vertical-align:middle;}

Usage of vertical-align
1. Used for inline elements
Let’s take the vertical alignment of images as an example to illustrate vertical-align. Usage of attributes.

img{ vertical-align:middle;}<div><img  src="/static/imghwm/default1.png"  data-src="http://pic2.58.com/ui7/job/hire/pic4.png"  class="lazy" / alt="Usage of CSS vertical-align attribute_html/css_WEB-ITnose" >看看我的位置</div>

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

td{ height:40px; vertical-align:middle;}<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</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 to be invalid. But we can use the display attribute, set its value to table-cell, convert the block element into a cell, and then use the vertical-align attribute.

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}<div><img  src="/static/imghwm/default1.png"  data-src="http://pic2.58.com/ui7/job/hire/pic4.png"  class="lazy" / alt="Usage of CSS vertical-align attribute_html/css_WEB-ITnose" ></div>

It should be noted that the above method has compatibility issues. IE6/IE7 and browsers with IE as the core such as World Window, 360, Aoyou and other browsers do not support this usage, but Chrome and Firefox can.
In order to be compatible with IE6/7, you can add the following attributes to the div

div{ *display:block; *font-size:175px;/*高度为200px， 则200*0.873约为175px* 撑开/ }

**

Special reminder: vertical-align is only effective for inline elements, not block-level elements.

**

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.