Android浏览器下line-height垂直不居中的问题

2019-09-20166次阅读Android
<span class="send">发布</span>
.send{
  float:right;
  width:1.62rem;
  height:.74rem;
  line-height:.74rem;
  text-align:center;
  font-size:.3rem;
  border-radius:.06rem;
  color:#fff;
  background-color:#0CACFF;
}

真机测试发现在Android浏览器下line-height垂直不居中的问题,网上百度了一下,在这里做一下备忘总结。

可知原因:

1、字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 

2、使用rem的单位时造成(根元素如果动态改变时,根元素字体可能不是整数)。

解决办法:

display: table-cell;/*元素的作用就像<td> 一样。*/
text-align: center;/*水平居中*/
vertical-align: middle;/*垂直居中*/

display: table-cell使元素就像<td> 一样,同时也造成当前元素不具有默认宽和高,所以要显示设置一下width、height值。

这种布局和浮动一起使用会失效,解决这个问题可以在外面包一个标签,把浮动属性放在此元素上。

<span class="send" data-font="发布"></span>
.send{
  float:right;
}

.send:before{
  content:attr(data-font);
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  width:1.62rem;
  height:.74rem;
  font-size:.3rem;
  border-radius:.06rem;
  color:#fff;
  background-color:#0CACFF;
}

通过上面的方法,可以做到很好的改善。对于比较小的高度,这方法不起作用,建议设置line-height:0;padd上下来折中来处理。

上一篇: js中onkeydown回车触发事件的几种方法  下一篇: Array.prototype.push与Array下标[i]生成数组性能上的差异  

Android浏览器下line-height垂直不居中的问题相关文章