Vertical-align Property

Definition and Usage:

The Vertical-align property sets the vertical alignment of the element.

Browser support:

All browsers support the Vertical-align property.

notes: The attribute value "Inherit" is not supported by any version of Internet Explorer (including IE8).

Syntax:  

Vertical-align:baseline | Sub | Super | Top | Text-top | Middle | Bottom | Text-bottom | < percent > | < length > | Inherit

Parameters:

Value	Describe
Baseline	default . element is placed on the baseline of the parent element
Sub	Subscript for vertical alignment of the aligned
Super	Superscript of vertical aligned aligned
Top	Aligns the top of the element with the top of the highest element in the row
Text-top	Aligns the top of the element with the top of the parent element's font
Middle	Place this element in the middle of the parent element
Bottom	Aligns the top of the element to the top of the lowest element in the row
Text-bottom	Aligns the bottom of the element with the bottom of the parent element's font
%	Use the percent value of the "Line-height" property to arrange this element. Allow negative values to be used
Inherit	Specifies that the value of the Vertical-align property should be inherited from the parent element

Applies to: inline element and cell (Table-cell) elements

1. For inline elements

<div> Take a look at my location </div>

img{Vertical-align:middle;}

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/89/9B/wKioL1gYQcPhu87ZAACzdaiDqaA719.png "title=" Qq20161101151810.png "alt=" Wkiol1gyqcphu87zaaczdaidqaa719.png "/>

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 version of the default is the span in the middle of input , but ie6/ie7, span bottom and input bottom alignment, the way to achieve a unified approach is to add input{vertical-align:middle to input;}, in order to align them vertically, they are also set for span span{ Vertical-align:middle;}

2. For forms

<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>

td{height:40px; vertical-align:middle;}

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/89/9B/wKioL1gYQ6PgdtMtAAAHxFUGLtU561.png "title=" Qq20161101152514.png "alt=" Wkiol1gyq6pgdtmtaaahxfugltu561.png "/>

3. For block-level elements

Vertical-align does not apply to block-level elements, but you can set the display property of the parent element to Table-cell, convert the block-level element to a cell, and then use the Vertical-align property

<div> </div>

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

IE8 and above Browser effect: (Chrome, FireFox, opera are displayed normally)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/89/9C/wKioL1gYSKTiHK72AAC_v4C1vf4759.png "title=" Qq20161101154532.png "alt=" Wkiol1gysktihk72aac_v4c1vf4759.png "/>

Ie7,ie6 Browser Effect:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/89/9E/wKiom1gYSLTw9te9AADAS-UTQgE893.png "title=" Qq20161101154603.png "alt=" Wkiom1gysltw9te9aadas-utqge893.png "/>

In order to solve the problem under ie6,7, we can use CSS hack way

div{width:500px; height:200px; display:table-cell; vertical-align:middle; border:1px Blue solid; /* for ie6,7* *display:block; *line-height:200px;}

Check the effects of each version of IE again

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/89/9C/wKioL1gYS2Hza4xrAADfTD68TYs411.png "title=" Qq20161101155835.png "alt=" Wkiol1gys2hza4xraadftd68tys411.png "/>650" this.width=650; "src=" http://s4.51cto.com /wyfs02/m02/89/9e/wkiom1gys3gjyhihaadbiqwzlo0588.png "title=" Qq20161101155850.png "alt=" Wkiom1gys3gjyhihaadbiqwzlo0588.png "/>

For more full explanations, refer to http://www.ddcat.net/blog/?p=233

Http://blog.sina.com.cn/s/blog_51048da701018490.html

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1868132

Vertical-align Property