Ionic - văn bản ion-mục không được căn giữa theo chiều dọc khi biểu tượng ion lớn hơn

Question

Tôi có một danh sách các mục ion có biểu tượng theo sau là văn bản. Khi kích thước biểu tượng nhỏ hơn như được thấy trên hình ảnh bên dưới, văn bản dường như theo chiều dọc căn chỉnh chính nó đến trung tâm của mục ion. Nhưng khi biểu tượng lớn hơn, căn chỉnh sẽ hơi lệch.

Đây là tất cả những gì đã thêm:

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

Và CSS:

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

Làm thế nào tôi có thể sửa lỗi này. Tôi đã thử sử dụng vertical-align, align-item và align-self. Không ai trong số họ làm việc.

Answer 1

Hãy thử điều này. Thêm một yếu tố <span> đến các văn bản, vertical-align chỉ hoạt động với các yếu tố bên inline bên cạnh:

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

Vui lòng cập nhật sau CSS của bạn. Ngoài ra, bạn cũng có thể di chuyển văn bản của mình vào thẻ nhãn và cũng cung cấp trung gian căn chỉnh theo chiều dọc cho thẻ nhãn.

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>