vertical-align

一、css

     1、display:inline-block;时，会出现两边元素基准线不一样 而导致两边文字上下不齐   ？？？

 

     verticla-align属性值小结：参考至（https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height）

        /* 关键字值 */

            vertical-align: baseline;

            vertical-align: sub; 

            vertical-align: super;

            vertical-align: text-top;

            vertical-align: text-bottom;

            vertical-align: middle;

            vertical-align: top;

            vertical-align: bottom;

 

        /* <长度> 值 */

            vertical-align: 10em;

            vertical-align: 4px;

 

        /* <百分比> 值 */

            vertical-align: 10%;

 

        /* 全局值 */

            vertical-align: inherit;

            vertical-align: initial;

            vertical-align: unset;

 

            vertical-align和line-height之间的基友关系

 

 

            vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。举个简单的例子，如下CSS代码：

 

                {

                          line-height: 30px;

                          vertical-align: -10%;

                }

 

 

                实际上，等同于：

 

 

                {

                          line-height: 30px;

                          vertical-align: -3px;    /* = 30px * -10% */  

                }