when text and small icons are centered, there will be a problem of upper text on some Android computers, resulting in the text and icons are not centered on their

try the following methods: display:inline-block;vertical-align:middle; elastic box model, padding

related codes

/ / Please paste the code text below (do not replace the code with pictures)
.box {

display: flex;
justify-content: flex-start;
align-items: center;
height: q(36);
background: -sharpffa500;
span {
    display: block;
    height: q(72);
    font-size: q(72);
    line-height: q(72);
    transform: scale(.5);
}
i {
    display: block;
    margin-left: q(10);
    width: q(14);
    height: q(22);
    background: url("../images/right_caret.png") no-repeat center center;
    background-size: contain;
}

}
.box3 {

margin-top: q(30);
background: -sharpffa500;
display: block;
font-size: q(72);
i {
    display: inline-block;
    margin-left: q(10);
    width: q(14);
    height: 1ex;
    background: url("../images/right_caret.png") no-repeat center;
    background-size: contain;
}

}
/ / box2 is centered
.box2 {

margin-top: q(30);
font-size: 0;
line-height: q(86);
vertical-align: middle;
background-color: -sharpf00;
.text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.txt {
    font-size: q(36);
    line-height: 1;
}
i {
    display: inline-block;
    vertical-align: middle;
    margin-left: q(10);
    width: q(14);
    height: q(22);
    background: url("../images/right_caret.png") no-repeat center center;
    background-size: contain;
}

}

/ / Button style
.btn _ wrap {

display: table;
width: q(300);
margin: q(20) auto 0;
height: q(200);
padding: q(20);
background: -sharp5BD628;
vertical-align: middle;
a {
    display: table-cell;
    vertical-align: middle;
    width: q(300);
    text-align: center;
    font-size: q(36);
    color: -sharp0A0A0AFF;
    background: -sharpDD2;
    border-radius: q(30);
}

}

/ / input box
.input _ wrap {

margin: q(20) auto 0;
height: q(80);
line-height: q(80);
background: -sharpf00;
padding: 0 q(30);
input {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    outline-style: none;
    font-size: q(24);
    line-height: q(24);
}

}

/ / button style
.button _ wrap {

margin: q(20) auto 0;
button {
    display: block;
    margin: 0 auto;
    background-color: -sharp56d176;
    width: q(200);
    border: none;
    outline: none;
    padding: q(20) 0;
    font-size: q(36);
    color: -sharpfff;
}

}
scss:
/ / Top return button
.top _ wrap {

margin: q(30) auto 0;
height: q(100);
line-height: q(100);
background-color: -sharp06c1ae;
.back_btn {
    display: block;
    width: q(40);
    height: q(100);
    line-height: q(100);
    padding: 0 q(10);
    i {
        display: inline-block;
        position: relative;
        width: q(40);
        height: q(40);
        background-color: -sharpf00;
        &:before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: q(30);
            height: q(30);
            border-left: q(10) solid -sharpfff;
            border-bottom: q(10) solid -sharpfff;
            transform: scale(.8) rotate(45deg);
        }
    }
}

}
HTML
< body >

<div class="box"><span class="text"></span><i></i></div>
<div class="box3"><i></i></div>
<div class="box2"><span class="text"><span class="txt"></span></span><i></i></div>
<div class="btn_wrap"><a href="javascript：;"></a></div>
<div class="input_wrap">
  <input type="text" placeholder="">
</div>
<div class="button_wrap">
  <button></button>
</div>
<div class="top_wrap"><a class="back_btn"><i></i></a></div>

< / body >

none of the above methods can achieve the result, and the font is still on the upper side of the bug