一、vertical-align支持4大类：

1.线类： baseline(默认值), top,  middle, bottom

2.文本类：text-top, text-bottom

3.上标下标类：sub, super

4. 数值百分比类： 20px, 2em, 20%.......

/******************************************************************************************************************************/

二、vertical-align使用场景(起作用的前提)：

vertical-align 用于行级元素，如： inline、  inline-block 、 table-cell (td)等元素。

即： img、span、、strong、 em、未知元素、input、button等标签。(默认状态下：图片、文字、按钮、单元格)

/********************************************************************************************************************************/

三、vertical-align 与 line-height 的关系

vertical-align百分比是相对于line-height值计算的。

{  line-height: 30px;  vertical-align: -10%; }

相当于 { line-height: 30px; vertical-align: -3px;    /*   30px*-10%    */  }

1、例子 ：

img{ vertical-align: baseline; line-height:1.5; font-size: 24px;}  图片下边缘留白， 如何处理？？？？？？？

对 vertical-align 或者line-height进行修改就可以处理此留白的问题。

方法一： 消灭 vertical-align。    设置 display:block; margin auto;   让 vertcal-align不起作用即可。

方法二： 改变vertical-align的对齐方式。 设置  vertical-align: bottom/ middle /top 即可。

方法三： 改变line-height。 设置 line-height: 0; 或者  font-size:0;

2、  大小不固定的图片、文字如何垂直居中    { vertical-align: middle; line-height:36px; }

3、  text-align: justify任意数目列表两端对齐效果 (消除图片与盒子之间的间隙 )

--占 位标签 --/>

.justify-fix { display: inline-block; width: 250px; }

img { vertical-align: top;  }

/************************************************************************************************************************************/

四、 完全垂直居中  vertical-align { middle; font-size: 0; }

/*********************************************************************************************************/

vertical-align文本类属性值。 vertical-align: text-top; / text-bottom;

/***********************************************************************************************************/

五、 实现文字与图片居中对齐

文字

.test-list > span { display: inline-block; width: 210px; vertical-align: middle;}

.test-list > img { vertical-align: middle; }

/*******************************************************************************************************************/

六、实际应用

1、 小图标和文字的对齐的方法：        img { vertical-align: -10px; }

( 经验: 使用 20*20px大小的图标，后面跟一个14px的文字，vertical-align: - 5px; 是非常合适的。)

2、不定尺寸图片或多行文字的垂直居中，需要三个步骤：

a: 主体元素 inline-block  化;

b: 0宽度100%高度辅助元素;

c: vertical-align: middle;

img { vertical-align: middle; }

i { display: inline-block; height: 100%; vertical-align: middle; }

3. 大小不固定的文字垂直居中

.文字111..

span { display: inline-block; vertical-align: middle; }

i { display: inline-block; height: 100%; vertical-align:middle;}