慕课张鑫旭，笔记之veritical-align整理

1、vertical-align   垂直对齐

    线类：baseline top  middle bottom

   文本类 :  text-top  text-bottom

   上标下标类 ： sub super

    数值百分比类 : 20px 2em 20% ...    都支持负值  （只有margin，letter-spacing，word-spacing  , vertical-align）

                              行为表现一致     百分比值相对于行高计算  （ie7 不支持小数line-height）

2、vertical-align起作用的前提

    应用于inline水平以及‘table-cell’元素。

   inline： img ， span ， strong ， em ，未知元素

   inline-block : input ， button  

   table-cell   元素    table-cell  <td>

   默认状态下：  图片， 按钮， 文字，单元格

3、display ： 更改元素的显示水平

      css声明，也会更改元素的显示水平

  1、 实例

没有任何的反应，默认p为block元素，应该设置img为垂直居中，或者改变p

  2、实例

垂直居中了，设置图片为block，则没有效果了

3、css申明间接改变display水平

    默认图片垂直居中，

    此时设置图片左浮动，文字失效

加在p上面，图片近似垂直居中

 

实现了图片，文字，居中显示

3、vertical-align 与line-height   垂直对齐与行高

      1、百分比值是相对于行高计算的

      2、对于内联元素，veitical-align与line-height虽然看不见，但实际上到处都是

     图片后面有个空白节点：vertical-align ： baseline ； line-height：1.5；font-size:24px;

   此时font-size为24px； 高度就是24*1.5 就是36  然后还有baseline到bottom的距离

解决办法：

   1、display： block ； margin ： auto；

   2、改变vertical-align的对齐方式 ：  vertical-align ： bottom  就行

   3、改变行高为（line-height） 0;

   4、改变font-size 为0；

基本现象衍生：（近似）垂直居中

    vertical-align : middle ; line-height : 36px;  基本都支持

      不这样的话，是不会起作用的

复杂现象

      text-align : justify 任意数目列表两端对齐效果

      基线原理：

主要的原因是，没有文字默认为空的，有文字基线上面的文字，然后围绕文字下方

如果设置盒子的行高为0 ，又会往下掉一点，字符位于中间

4、vertical-align线类属性值深入理解

      vertical-align : bottom   inline/inline-block元素，元素底部和整行的底部对齐

                                            table-cell元素：单元格底padding边缘和表格行的底部对齐

      vertical-align : middle    inline/inline-block元素：元素的垂直中心点和父元素基线上1/2 x-height对齐

                                           table-cell元素 ： 单元格填充盒子相对于外面的表格行居中对齐

  5、为啥是近似垂直居中

        容器由行高决定，字符有下沉特性（主要原因）

        解决办法：font-size 设置为0；都在一条线

6、深入理解vertical-align文本类属性值

     1、vertical-align：text-top   盒子的顶部和父级content area 的顶部对齐（父级字体大小有关系）

     2、vertical-align ： text-bottom 盒子的底部和父级content area 的底部对齐（父级字体大小有关系）

    与行高没有任何关系，与后面的文字也没有关系

使用背景  ：  表情元素  ， 

 7、vertical-align 上标下标类

      <sup>  <sub> 

           vertical-align: super   :  提高盒子的基线到父级合适的上标基线位置

           vertical-align：sub ： 降低盒子的基线到父级合适的下标基线位置 

     实际用途：  没有

8、vertical-align前后不一的行为表现

    相邻元素不同的vertical-align的行为表现是

    

近似垂直居中： 

表示

这样实现完全垂直居中   

结论：关注当前元素和父级，前后并没有直接影响

9、vertical-align糟糕的兼容性

     ie6/7

     更高    ie下图文一体了

                middle的解释有问题

10、vertical-align的实际应用

        1、小图标和文字的对齐

    1、默认基线对齐，负值的解析

 

    2、不定尺寸图片或多行文字的垂直居中

         1、主体元素inline-block 化

         2、0 宽度100%高度辅助元素

         3、vertical-align： middle ；