遇到android文本無法垂直居中問題致讥，眾里尋他千百度富岳、google，好不容易解決了
一撑螺、常用的方式
- 1含思、
transform縮放
<div class="text-box" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
<span>文本</span>
</div>
- 文本居中了，但是
transform不能還原元素在dom上的占用區(qū)域大小
- 2甘晤、內(nèi)邊距+行高設為
normal
<div class="text-box" style="box-sizing: border-box; padding: 2px; line-height: normal; font-size: 10px;">
<span>文本</span>
</div>
- 文本居中含潘，但在部分客戶端上不居中
- 3、行高+字體大小設為
initial
<div class="solution" style="line-height: 16px; font-size: initial;">
<span style="font-size: 10px;">文本</span>
</div>
- 文本居中线婚，在最新的
Chrome瀏覽器上不居中
- 4遏弱、強行
margin-top
.text-box::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-top: 1px;
}
- 不好控制
margin-top的值，而且也會影響ios端的顯示效果
- 5塞弊、
flex
.text-box {
height: 36px;
display: inline-flex; /* 或者display: flex */
align-items: center;
}
- 測試下來不垂直
二漱逸、我的處理方式
-
flex+行高設為normal
- display inline-block
+ display inline-flex
+ align-items: center
height 34px;
- line-height: 34px;
+ line-height: normal;
line-height為normal會自動配置文字區(qū)域，讓文字在文字區(qū)域處于居中游沿，而自己設置line-height為其他值實現(xiàn)不了在各個端讓文字在文字區(qū)域居中flex保證了文字區(qū)域在父元素區(qū)域里面的居中
