How to center horizontally?

@gonmtl wrote:

Hello guys, i have this code

<ion-row>
            <ion-col size="12">

                <ion-item lines="none">
                  <ion-label position="stacked" class="login-input-title">Correo Electrónico</ion-label>
                </ion-item>

                <ion-item id="login-input-container">
                <ion-input type="text" value="" 
                placeholder="Ingrese su correo electrónico..." 
                class="login-placeholder"></ion-input>
                </ion-item>   

            </ion-col>  
        </ion-row>

.login-input-title {
    font-family: Nunito;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.75);
    padding-bottom: 30px;
    padding-top: 0px;
    margin-top: 0px;
}

#login-input-container {
    width: 330px;
    height: 38px;
    border-radius: 20px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
    --background: #FFFFFF;
    --placeholder-color: rgba(0, 0, 0, 0.49);
    --placeholder-font-style: 'Open Sans';
    --placeholder-font-weight: normal;
    --border-width: 0 0 0px 0;
    --show-full-highlight: 0;
    --show-inset-highlight: 0;

    &.item-has-focus {
        border: 1px solid var(--ion-color-primary);
    }
}


.login-placeholder {
    padding-bottom: 0px;
    margin-bottom: 10px;
}

And this is the result:

imagen.png972×413 20.8 KB

I want to move those elements to the middle of the screen, like the button, for the button i used class=“align-text-middle” , but for those elements it’s not working.

Thanks!

Posts: 1

Participants: 1

Read full topic