css片段

解决 Android 浏览器下 line-height 垂直居中偏离问题

方案一:
我们可以通过 transform: scale 来处理,比如,字体大小是 8px,我们把字体设定为 16px,然后通过 scale(0.5) 缩放至一倍大小,简单粗暴。

注意:放大两倍会使得容器被撑开占位。

方案二:
结合行高、对齐的关系,结合伪元素得出的黑科技,亲测效果很理想。

.jd::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: 1px;
}

[CSS实战样式:文字两侧加居中横线] (https://blog.csdn.net/Bumphy/article/details/78319678)

    .footer{
      text-align: center;
      img{
        width: 280px;
        vertical-align: middle;
        margin: 0 56px;
      }
      span{
        display: inline-block;
        width: 100px;
        height:1px;
        background: rgba(173, 180, 190, 0.4);
      }
    }