在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 文字和圖標(biāo)在部分安卓（小米、魅族）居中對(duì)其問(wèn)題？

文字和圖標(biāo)在部分安卓（小米、魅族）居中對(duì)其問(wèn)題？

在做文字和小圖標(biāo)居中對(duì)齊時(shí)，在部分安卓機(jī)上會(huì)出現(xiàn)文字偏上的問(wèn)題，導(dǎo)致文字和圖標(biāo)不是居中對(duì)其的

嘗試的方法有：display：inline-block；vertical-align：middle；彈性盒模型，padding

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
.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">查看銀行網(wǎng)點(diǎn)</span><i></i></div>
<div class="box3">查看銀行網(wǎng)點(diǎn)<i></i></div>
<div class="box2"><span class="text"><span class="txt">查看銀行網(wǎng)點(diǎn)</span></span><i></i></div>
<div class="btn_wrap"><a href="javascript:;">點(diǎn)擊跳轉(zhuǎn)</a></div>
<div class="input_wrap">
  <input type="text" placeholder="請(qǐng)輸入關(guān)鍵字">
</div>
<div class="button_wrap">
  <button>點(diǎn)我打你</button>
</div>
<div class="top_wrap"><a class="back_btn"><i></i></a></div>

</body>

以上幾種方法都達(dá)不到結(jié)果，字體還是有偏上的bug

回答
編輯回答
瘋子范

兄弟解決了嗎？我這時(shí)也是遇到同樣的問(wèn)題，求解

2017年2月26日 22:46
編輯回答
朕略傻

首先知道為什么出現(xiàn)這種問(wèn)題：
clipboard.png
解決方案：
html:

<div>
    <span>測(cè)試測(cè)試，即便是多行，我也還是垂直居中對(duì)齊的。</span>
</div>

css:

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;}

還有其他的解決方案，flex布局，切圖

2017年10月24日 17:06