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:
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!