ионная метка не соответствует изображениям ioni c 5 - PullRequest
Новая
       8

ионная метка не соответствует изображениям ioni c 5

0 голосов
/ 25 марта 2020

Я пытаюсь сделать ion-label центр. но класс ion-text-center, кажется, не работает, и без этого в некоторых элементах он не выглядит хорошо, например, в toys, как я могу сделать ярлык к центру? вот мой код 

<ion-grid>
    <ion-row>
        <ion-col>
            <ion-item lines='none'>
                <ion-avatar class='ion-text-center'>
                    <ion-img src='/assets/icons/beauty-health.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Beauty Health</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/baby.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Babies</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/cloths.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Cloths</ion-text>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/glasses.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-label>Sun glasses</ion-label>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img class='reduced' src='/assets/icons/wrist-watch.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Watches</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/toys.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Toys</ion-text>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/electronics.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Electronics</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/sports.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Sports</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/furniture.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Furniture</ion-text>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/men.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Men</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/women.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Women</ion-text>
        </ion-col>

        <ion-col>
            <ion-item lines='none'>
                <ion-avatar>
                    <ion-img src='/assets/icons/perfumes.png'></ion-img>
                </ion-avatar>
            </ion-item>
            <ion-text>Perfumes</ion-text>
        </ion-col>
    </ion-row>



</ion-grid>

Alignment

...