Detailed explanation of the usage of attribute vertical-align in CSS

Definition of vertical-align

W3C definition of vertical-align: The vertical-align attribute sets the vertical alignment of the 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 bottoms of letters above it. 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) - Places the element below (subscript), specifically aligning the element's baseline with its parent element's preferred subscript position.

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

text-top (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) - vertically centers the element.

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:

The first type For usage, first look at the following sentence "In table cells, this property 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 you give a vertical-align:bottom, it will be aligned at the bottom, and 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;}

For another example, when input and span are used together, in Google Firefox IE8 or above The default is that 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 to align their vertical midlines. , and also set span{vertical-align:middle;}

Use of vertical-align

1. For inline elements

The following is the image Vertical alignment is an example to illustrate the use of the vertical-align attribute.

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="Detailed explanation of the usage of attribute vertical-align in CSS" >看看我的位置</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="Detailed explanation of the usage of attribute vertical-align in CSS" ></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* 撑开/ 
 }

The above is the detailed content of Detailed explanation of the usage of attribute vertical-align in CSS. For more information, please follow other related articles on the PHP Chinese website!