vertical-align垂直居中( 消除html中图片下边缘留白 )

一、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;}