android 布局垂直居中显示,关于前端:Android解决vwvh布局下中文文字无法垂直居中的问题...

解决办法

阐明

目前暂未发现完满解决方案。

操作步骤

①设置HTML标签：

②设置明码框CSS款式：font-family: monospace;

解释

对于第①点，请查阅下方参考1中第一条答复；

对于第②点，在android端设置” “会导致明码明码符号变小，同时，字符间距也会因而变大，参考下图：

1、设置了

2、未设置

3、设置了，

同时设置了font-family: monospace;

能够看到，再设置了，并设置了font-family: monospace;后，明码字符间距变小了很多，然而没法做到和原来一样，算是一种折中的解决形式，也尽量升高对于其它业务模块的影响。

其它

查阅了网上的其它一些解决形式并且通过自己亲测，后果如下：

计划一 设置固定字体大小

即不采纳rem，vh/vw之类的自适应计划，间接设置

line-height=height(=20px)。长处就是对于某一分辨率设施来说是比拟完满解决的计划，那毛病也很显著，须要针对不同分辨率设施采纳媒体查问等形式进行手动适配，编写CSS工作量明显增加。

计划二 应用CSS3 scale属性

行将CSS内蕴含width、height、line-height之类能够设置值的属性设置为原来的2倍，而后通过scale(0.5)进行放大，就变为和原来元素一样大小。没采纳这种形式的起因是并不是在所有的android机型上都能失效，自己应用的p20 pro测试机上该办法就是不行的。

计划三 应用flex布局

不论是对原来的元素设置flex还是在里面增加父元素并设置flex属性，这种形式都行不通。

其它计划也都有或多或少的问题，能够依据本人的需要进行计划的取舍。

参考：

1、Android浏览器下line-height垂直居中为什么会偏离？

2、解决line-height=height元素高度然而文字并没有垂直居中的问题

3、挪动端字体的垂直居中问题解决