极客观点
项目管理
HarmonyOS
在做文字和小图标居中对齐时，在部分安卓机上会出现文字偏上的问题，导致文字和图标不是居中对其的
尝试的方法有：display：inline-block；vertical-align：middle；弹性盒模型，padding
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
.box {
display: flex;
justify-content: flex-start;
align-items: center;
height: q(36);
background: #ffa500;
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: #ffa500;
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的居中
.box2 {
margin-top: q(30);
font-size: 0;
line-height: q(86);
vertical-align: middle;
background-color: #f00;
.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;
}}
// 按钮样式
.btn_wrap {
display: table;
width: q(300);
margin: q(20) auto 0;
height: q(200);
padding: q(20);
background: #5BD628;
vertical-align: middle;
a {
display: table-cell;
vertical-align: middle;
width: q(300);
text-align: center;
font-size: q(36);
color: #0A0A0AFF;
background: #DD2;
border-radius: q(30);
}}
// 输入框
.input_wrap {
margin: q(20) auto 0;
height: q(80);
line-height: q(80);
background: #f00;
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样式
.button_wrap {
margin: q(20) auto 0;
button {
display: block;
margin: 0 auto;
background-color: #56d176;
width: q(200);
border: none;
outline: none;
padding: q(20) 0;
font-size: q(36);
color: #fff;
}}
scss:
// 顶部返回按钮
.top_wrap {
margin: q(30) auto 0;
height: q(100);
line-height: q(100);
background-color: #06c1ae;
.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: #f00;
&:before {
position: absolute;
content: '';
left: 0;
top: 0;
width: q(30);
height: q(30);
border-left: q(10) solid #fff;
border-bottom: q(10) solid #fff;
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>
兄弟解决了吗？我这时也是遇到同样的问题，求解