The application of 2016.7.23 vertical-align

Vertical Vertical

Align alignment

Vertical-align Vertical alignment (mode)

Vertical-align can only be used under block-inline and inline, and cannot be used under block.

Vertical-align only for inline elements

Vertical-align has attributes such as top, text-top, Middle, Baseline, bottom, Text-bottom, Sub, super, inherit, value, percent, and so on.

Light look is not understand, I wrote a string of code, we come to study (Inherit is inherited from the parent, here does not show, the number and percentage in the final presentation, not written in this string of code)

One, Vertical-align:top, Text-top, Middle, Baseline, bottom, Text-bottom, Sub, super. Sub and SUP.

　CSS code:

img{width:101px;Height:75px; }span{width:201px;/*width:101px;*/                /*when the width is 101px, the font will be two lines, vertical:text-top, and Vertical:text-bottom; aligned to the second line of the word is exactly the word that aligns the last line*/Height:55px;background:Yellow;Display:Inline-block; }. Top{vertical-align:Top; }. Text-top{vertical-align:Text-top; }. Middle{vertical-align:Middle; }. Baseline{vertical-align:Baseline; }. Text-bottom{vertical-align:Text-bottom; }. Bottom{vertical-align:Bottom; }. Sub{vertical-align:Sub; }. Super{vertical-align:Super; }. Normal{Display:inline;background:#fff; }

　　Body Code:

This is<imgsrc= "1.png"class= "Top"><span>Top Tops</span><BR><BR>this is<imgsrc= "1.png"class= "Text-top"><span>Text-top text superscript</span><BR><BR>this is<imgsrc= "1.png"class= "Middle"><span>Middle Central</span><BR><BR>this is<imgsrc= "1.png"class= "Baseline"><span>Baseline baseline</span><BR><BR>this is<imgsrc= "1.png"class= "Text-bottom"><span>Text-bottom text subscript</span><BR><BR>this is<imgsrc= "1.png"class= "Bottom"><span>Bottom Bottom</span><BR><BR>this is<imgsrc= "1.png"class= "Sub"><span>Sub</span><BR><BR>this is<imgsrc= "1.png"class= "Super"><span>Super</span><BR><BR>Sub:<spanclass= "Sub Normal">X</span>2&nbsp;&nbsp;Super:<spanclass= "Super normal">X</span>3&nbsp;&nbsp;H<Sub>2</Sub>O&nbsp;&nbsp;y<sup>2</sup>                       &nbsp;&nbsp;

　Post-run Effects:

Does it feel like you're blindfolded? Slowly look down, I gradually analyzed, I think you will understand.

1, please watch the enlarged two pictures, know Text-top, Text-bottom, top, bottom four properties

From the last two pictures, Text-top and Text-bottom are the top and bottom of the corresponding text, top and bottom are the corresponding sibling elements (span) at the bottom of the top.

2, please watch the following picture, know the role of baseline

The baseline is the baseline of the corresponding text, as shown in this figure. The baseline is generally the bottom of the English alphabet. (write English letters, four lines, baseline is the third line)

3, please watch the following picture, know the role of middle

From the above, the Central line of the world-class alignment I do not understand, here I do not know how to explain, copy the interpretation of the world. "Place this element in the middle of the parent element", the blog Park is big god, if you know this vertical-align:middle, the specific use, must tell me yo, I will be grateful.

4, please see the following picture, know the role of vertical-align:sub and Super, but also the sub label and the role of the SUP tag

　　　　　　　　　　

From the above, sub and super play a role.

Second, Vertical-align: value, percentage;

　CSS code:

　　

img{width:101px;Height:75px; }span{width:201px;/*width:101px;*/                /*when the width is 101px, the font will be two lines, vertical:text-top, and Vertical:text-bottom; aligned to the second line of the word is exactly the word that aligns the last line*/Height:55px;background:Yellow;Display:Inline-block; }. v55px{vertical-align:55px; }. V50{vertical-align:50%; }

Body Code:

This is<imgsrc= "1.png"><span>Normal.</span><BR><BR>this is<imgsrc= "1.png"class= "v55px"><span>55px</span><BR><BR>this is<imgsrc= "1.png"class= "V50"><span>50%</span><BR><BR>

Post-run Effects:

The usual, begin to explain:

1, please watch the following picture, this is the normal state of appearance, not set any vertical

　　　　　　　　　　　　

2, please watch the following picture, this is set up the vertial:55px

　　　　　　　　

From this figure, vertical-align:55px, very much like margin-top:55px, but here margin-top:55px, it is difficult to achieve similar effect (do not believe you try, do not appear many bugs you and my surname). This function is very practical, first recorded, later turned out.

3, please watch the following picture, which is set up vertical-align:50%;

　　　　　　　　　　

　　　

From this view, Google default line height is 18px, font 16px. 50% of the row height is 9px.

Vertical-align, I'm done with this for the time being.

Vertical-align a lot of functions, I do not know how much, I know one, is the CSS initialization, with Vertical:middle can remove the img below the 3px blank gap.

All kinds of great gods if there is a better suggestion, you can discuss it with me.

The application of 2016.7.23 vertical-align