移动端页面文字垂直居中兼容性问题
高洛峰
高洛峰 2016-12-02 10:02:04
0
3
2526

22.png

22.png

第1张图是chrome模拟器里的效果。
第2、3张图是两台手机里的效果。
第4张图是按钮的样式。

按钮的高度和行高相等,文字应该垂直居中。
第1张图chrome模拟器中是正确的,第2张图中的效果也基本正常,但第3张图中的文字明显偏上了。
单位试过 rem,也试过 px,都会存在这种情况。
有没有人能分析一下问题的原因?
有没有完全兼容的解决方案?

明确一下我的问题:一行文字,在该行垂直方向居中,PC端正常,移动端有的正常,但有的没有垂直居中,这个问题是怎么产生的,有没有解决方案?

22.png

默认长宽字体大小先扩大为两倍,再用 scale 缩小为一半大小后的结果,效果确实好了一点,但感觉还是有一点点偏上。

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复 (3)
你的女神

我也遇到了这个问题,原本用< a >标签写的按钮,后来改用button就好了。给个高度,不用写行高,自动垂直居中。

    学霸

    目前比较有效的解决方法就是transform,放大一倍再缩小一半,但是写起来繁琐而且影响布局。我也想知道有没有什么既好又方便的方法

      三叔

      今天这个问题也纠结了研究了好久,安卓机下表现异常,PC、苹果机表现良好,如果一般情况,用margin偏移量来对齐,极端情况还是transform绝对定位居中比较靠谱。

        最新下载
        更多>
        网站特效
        网站源码
        网站素材
        前端模板
        关于我们 免责声明 Sitemap
        PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!