美文网首页我爱编程
单行文字在安卓下不能垂直居中

单行文字在安卓下不能垂直居中

作者: AlisaMfz | 来源:发表于2018-04-13 16:20 被阅读322次

问题:height 与line-height 组合实现单行文字垂直居中,在Android下总是不居中问题

场景: 邀请收徒  复制邀请码按钮 

原因:安卓设备像素转换物理像素的值不一致

解决方案: 利用padding-top 和 padding-bottom 和字体大小  结合zoom缩放来调整居中 目前适合的 有   24/@rem 31/@rem 33/@rem 34/@rem  35/@rem  40/@rem 42/@rem 48/@rem          只能根据UI设定的字体来微调。

.v-center(@height, @fontSize) {

    @ratio: @fontSize / (48/@re);//计算比例

    display: block;

    box-sizing: border-box;

    line-height: 1;

    height: auto;

    text-align: center;

    font-size: 48/@re;

    padding-top: ((@height/@ratio) - (48/@re))/(2/@ratio);

    padding-bottom: ((@height/@ratio) - (48/@re))/(2/@ratio);

    zoom: @ratio;

}

例如:我要实现一个垂直居中的按钮

<a href="" class='btn'></a>

.btn{

width:120/@re;

border-radius:100/@re;

color:#fff;

text-align:center;

position:absolute;

top:30/@re;

right:30/@re;

.v-center(54/@re,24/@re); 

}

要用less写 

相关文章

  • 单行文字在安卓下不能垂直居中

    问题:height 与line-height 组合实现单行文字垂直居中,在Android下总是不居中问题 场景: ...

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 移动端设置文字居中时偏上的问题

    移动端使用行高设置文字垂直居中时偏上问题 使用line-height设置行高使文字垂直居中时,安卓机文字显示偏上解...

  • div垂直居中的方法

    1、div中单行文字的垂直居中 在div中单行的文字需要垂直居中时,只需要对所在的div添加行高line-heig...

  • CSS文字垂直居中安卓适配问题

    在WebApp中,使用line-height等于height,设置文字垂直居中时,安卓渲染会出现偏上、并不居中的问...

  • 布局(一)display:table-cell

    html: css: 1)单行文字垂直居中 2)多行文字居中 3)容器居中 1 2 下面简述一下display:t...

  • 定义垂直居中五种方法

    单行文字垂直居中:line-height等于height; 块级元素垂直居中:position定位,flex布局,...

  • CSS中几种常用的居中

    居中 行内元素水平居中 文字相对图片、输入框垂直居中 块元素水平居中 单行文字垂直居中 更灵活的布局方式当然是建议...

  • css多行垂直水平居中--table布局大法

    ======= SEO专用 table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行...

  • 2018-08-25

    CSS垂直居中技巧,我只会23个,你会几个? 1、line-height 使用情景:单行文字垂直居中。常见于单行文...

网友评论

    本文标题:单行文字在安卓下不能垂直居中

    本文链接:https://www.haomeiwen.com/subject/zbzckftx.html