font-size属性对垂直居中问题的影响

2019-04-08

问题描述

如图所示，我想做到的效果：文字和右边的叉号垂直居中

而实际上的效果是偏下，试了很多种垂直居中的方法均无效.

场景代码复原如下

<html>
    <head>
        <style>
            body {
              font-size: 24px;
            }
            .select-tag {
                margin: 30px 0 20px;
                width: 155px;
                text-align: center;
                background: rgba(20, 190, 75, 0.1);
                border-radius: 2px;
                position: relative;
                line-height: 36px;
            }
            .tag-name {
                width: 80%;
                font-size: 14px;
                font-weight: 500;
                color: #14be4b;
                margin-right: 5%;
            }
            .delete-box {
                width: 10%;
                position: absolute;
                top: 0;
                right: 5%;
            }
            .delete {
                color: #999;
                text-decoration: none;
            }
            .delete::before {
                font-size: 14px;
                font-family: close;
                content: "\e901";
            }
        </style>
    </head>
    <body>
        <div class="select-tag"> 
            <div class="tag-name">垂直居中</div>
            <div class="delete-box">
                <a class="delete "href='#'></a>
            </div>
        </div>
    </body>
</html>

调试

调试检查源代码发现叉号的父元素的字体大小继承了根元素的字体24px，
在.delete-box加上一行代码

1	font-size: 14px;

发现叉号垂直居中了

font-size对垂直居中的影响

查找资料发现：当设置了font-size之后，改变了元素排列的基线，垂直方向的默认基线是是baseline。当文字设置font-size之后，会将inline-block元素的默认基线设置为文字的base-line，文字和叉号的字体大小不同，导致基线不同，从而导致排列的问题。