イオンアイコンアイテムが大きい場合、イオンアイテムアイテムのテキストが垂直方向にセンタリングされない

Question

イオンアイテムのリストにアイコンとテキストが続きます。下の画像のようにアイコンのサイズが小さくなると、テキストがイオンアイテムの中心に垂直に整列しているように見えます。しかし、アイコンが大きくなると、位置合わせは少しずれてしまいます。

<ion-item> 
    <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
    Recent 
</ion-item> 

とCSS：私はこの問題を解決するにはどうすればよい

.icon { 
font-size: 35px; 
color: #ffC977; 
} 

これは私が追加したすべてです

。 vertical-align,align-item、align-selfを使ってみました。彼らのどれも働かなかった。

Answer 1

これを試してください。 vertical-alignのみ側で要素インライン側と連携し、テキストに<span>要素を追加します。

CSS

.icon { 
display: inline-block; 
font-size: 35px; 
color: #ffC977; 
vertical-align: middle; 
} 

.text{ 
    display: inline-block; 
    vertical-align: middle; 
} 

HTML

<ion-item> 
    <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
    <span class="text">Recent</span> 
</ion-item> 

Answer 2

あなたの次のCSSクラスを更新してください。また、テキストをラベルタグに移動して、ラベルタグの縦に並んだ中間を与えることもできます。

CSS

.icon { 
    font-size: 35px; 
    color: #ffC977; 
    vertical-align: middle; 
    } 

    label{ 
     vertical-align: middle; 
    } 

HTML

<ion-item> 
    <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
    <label>Recent</label> 
</ion-item>