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% */  
                }

 

posted on 2018-12-27 15:13  EchoHEYANZHEN  阅读(148)  评论(0编辑  收藏  举报

导航