安卓瀏覽器中文字太小垂直不居中的緣由及解決方案

時間 2021-02-28

標籤 css html ios chrome 瀏覽器微信佈局字體 flex spa 欄目 Android 简体版

原文原文鏈接

當實現一個按鈕時，按鈕裏面的字體小於12px，且按鈕的高度較小時，使用lineheight=height的方法，在安卓系統中會出現文字上下不居中的狀況（iOS中正常），一般表現爲文字偏上。css

解決方案

切圖，把button當作圖片切出來；html
把lineheight設置的比height大1px，這樣在ios和安卓中作一個協調，看着都不會太奇怪；ios

大盒子套小盒子，文字在小盒子裏展現，而後讓小盒子在大盒子裏垂直居中。這種方法我首先想到的是使用flex佈局居中，而後還有一個display:table-cell;vertical-align: middle;的方法，我開始覺得這兩個效果是同樣的，然而在不一樣的瀏覽器中，兩種方式居然不一致！！！chrome

先上代碼：瀏覽器

<body>
    <p>經過<code>display: table-cell;vertical-align: middle;</code></p>
    <div class="normal">上下不居中的</div>
    <br />
    <div class="item-1">
        <span class="inner">上下居中的</span>
    </div>
    <p>經過<code>display: flex;align-items: center;</code></p>
    <div class="normal">上下不居中的</div>
    <br />
    <div class="item-2">
        <span class="inner">上下居中的</span>
    </div>
</body>

.normal {
    height: 18px;
    width: 60px;
    font-size: 10px;
    color: white;
    line-height: 18px;
    background: purple;
    border-radius: 30px;
}
.item-1 {
    width: 60px;
    height: 18px;
    background: purple;
    display: table-cell;
    vertical-align: middle;
    font-size: 10px;
    border-radius: 30px;
}
.item-2 {
    width: 60px;
    height: 18px;
    background: purple;
    display: flex;
    align-items: center;
    font-size: 10px;
    border-radius: 30px;
}
.inner {
    color: white;
    text-align: center;
}

而後上圖：微信