line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安卓对line-height兼容有问题。文章源自知更鸟-https://zmingcx.com/line-height-not-centered-vertically-in-android.html

办法一文章源自知更鸟-https://zmingcx.com/line-height-not-centered-vertically-in-android.html

父容器不要设置高度,line-height不设置具体数值,通过padding调整内边框。文章源自知更鸟-https://zmingcx.com/line-height-not-centered-vertically-in-android.html

line-height: normol;
padding: 8px 0;
display:inline-block;

方法二文章源自知更鸟-https://zmingcx.com/line-height-not-centered-vertically-in-android.html

把字体大小、定位、间距、高度和边框线整体都放大2倍,然后再缩小一倍:文章源自知更鸟-https://zmingcx.com/line-height-not-centered-vertically-in-android.html

transform: scale(0.5);
transform-origin: 0 0;

个人推荐方法一。文章源自知更鸟-https://zmingcx.com/line-height-not-centered-vertically-in-android.html

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
CSS3 水平垂直居中 Web前端

CSS3 水平垂直居中

当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。 CSS3 水平垂直居中 translate()是css3的新特性,在不知...
animation动画复合属性 Web前端

animation动画复合属性

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-...
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定