安卓浏览器中文字太小垂直不居中的缘由及解决方案

时间 2021-02-28

标签 css html ios chrome 浏览器微信布局字体 flex spa 栏目 Android 繁體版

原文原文链接

当实现一个按钮时，按钮里面的字体小于12px，且按钮的高度较小时，使用lineheight=height的方法，在安卓系统中会出现文字上下不居中的状况（iOS中正常），一般表现为文字偏上。css

解决方案

切图，把button当作图片切出来；html
把lineheight设置的比height大1px，这样在ios和安卓中作一个协调，看着都不会太奇怪；ios

大盒子套小盒子，文字在小盒子里展现，而后让小盒子在大盒子里垂直居中。这种方法我首先想到的是使用flex布局居中，而后还有一个display:table-cell;vertical-align: middle;的方法，我开始觉得这两个效果是同样的，然而在不一样的浏览器中，两种方式居然不一致！！！chrome

先上代码：浏览器

<body>
    <p>经过<code>display: table-cell;vertical-align: middle;</code></p>
    <div class="normal">上下不居中的</div>
    <br />
    <div class="item-1">
        <span class="inner">上下居中的</span>
    </div>
    <p>经过<code>display: flex;align-items: center;</code></p>
    <div class="normal">上下不居中的</div>
    <br />
    <div class="item-2">
        <span class="inner">上下居中的</span>
    </div>
</body>

.normal {
    height: 18px;
    width: 60px;
    font-size: 10px;
    color: white;
    line-height: 18px;
    background: purple;
    border-radius: 30px;
}
.item-1 {
    width: 60px;
    height: 18px;
    background: purple;
    display: table-cell;
    vertical-align: middle;
    font-size: 10px;
    border-radius: 30px;
}
.item-2 {
    width: 60px;
    height: 18px;
    background: purple;
    display: flex;
    align-items: center;
    font-size: 10px;
    border-radius: 30px;
}
.inner {
    color: white;
    text-align: center;
}

而后上图：微信

华为系统浏览器

chrome浏览器

微信内置浏览器

嗯...，国内浏览器市场“百家争鸣”啊~最后仍是总结一下吧，总的来讲flex的效果没有table-cell的好，特别是微信浏览器上面，因此仍是推荐items-2的解决方案。布局

为何会出现这种状况呢？

我开始遇到这个问题是网上文章不多，当时flex兼容性还不太好，你们也都在讨论解决方案，没有看到有人分享什么缘由致使这种状况，我后面也是看了一个阿里的大佬在一个线下的技术分享会后续分享出来的PPT里看到了相关的解释：字体

系统会根据font-family设置中第一个能在fonts.xml中匹配上的字体来计算排版，可是Android下中文又没有family name，致使中文或中英文混排时没法垂直居中。flex

说的不是很具体，我猜想大概是中文和英文的排版规则不一样致使的，英文会有Ascender，Median，Baseline，Descender之分，可是中文没有这一说，因此中文显示是总会多出一个Descender的高度，致使文字显示偏上，固然以上只是我的猜想，若是有人知道具体缘由还请告知。spa