テキストがAndroidでセンタリングされていません

Question

フレックスボックス、テーブル、vertical-alignを使用して解決しようとしましたが、効果がありません。

下記のスクリーンショットが表示されます。 Androidのは、それが正常に動作途中（font-size未満12ピクセル）が、iOS版を...整列しない

行の高さが

がline-height: normalを設定

削除は、上位の間隔が下その後、小さい...

アンドロイド

iOS版

.tags { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    margin: 0 -5px; 
 
    padding-top: 10px; 
 
} 
 
.tag { 
 
    flex: 0 0 25%; 
 
    min-width: 0; 
 
} 
 
.tag .caption { 
 
    position: relative; 
 
    display: block; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    margin: 5px; 
 
    font-size: 10px; 
 
    color: #82879b; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.tag .caption:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 200%; 
 
    height: 200%; 
 
    border: 1px solid #82879b; 
 
    border-radius: 20px; 
 
    transform-origin: 0 0; 
 
    transform: scale(.5); 
 
    box-sizing: border-box; 
 
}

<h2> English </h2> 
 

 
<div class="tags"> 
 
    <div class="tag"><span class="caption">You</span></div> 
 
    <div class="tag"><span class="caption">see</span></div> 
 
    <div class="tag"><span class="caption">it's</span></div> 
 
    <div class="tag"><span class="caption">in android</span></div> 
 
</div> 
 

 
<h2> Chinese </h2> 
 

 
<div class="tags"> 
 
    <div class="tag"><span class="caption">中</span></div> 
 
    <div class="tag"><span class="caption">文</span></div> 
 
    <div class="tag"><span class="caption">对</span></div> 
 
    <div class="tag"><span class="caption">齐</span></div> 
 
</div> 
 

 
<h2> Japanese </h2> 
 

 
<div class="tags"> 
 
    <div class="tag"><span class="caption">エネルギッシュな</span></div> 
 
    <div class="tag"><span class="caption">サニー</span></div> 
 
    <div class="tag"><span class="caption">ハロー</span></div> 
 
    <div class="tag"><span class="caption">ばか</span></div> 
 
</div>

Answer 1

私はあなたがはるかに少ないコードで、他のどこでもAndroidのテキストを中央に、そしてできると思います。

.tags { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 
.tag { 
 
    flex: 0 0 23%; 
 
    min-width: 0; 
 
    height: 35px; 
 
    border-radius: 35px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.tag .caption { 
 
    font-size: 14px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="tags"> 
 
    <div class="tag"><span class="caption">this</span></div> 
 
    <div class="tag"><span class="caption">should</span></div> 
 
    <div class="tag"><span class="caption">be centered</span></div> 
 
    <div class="tag"><span class="caption">in android</span></div> 
 
</div>