Ion-card center alignment

I am writhing this in ionic 4 the card comes in top of the page but i make card in centre of the page what will do please help me to solve this.

 <ion-content>

  <ion-card>
     <ion-input placeholder="user"></ion-input>
     <ion-input placeholder="pass"></ion-input>
 </ion-card> 
 </ion-content>
2 Likes
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
    <ion-card>
        <ion-input placeholder="user"></ion-input>
        <ion-input placeholder="pass"></ion-input>
    </ion-card>
  </div>
3 Likes

tq for your response

Well as he said you can do this as well as try this:

.class{
 width: 80%;
 margin: auto;
}
   <div class="class">
      <ion-card>
        <ion-input placeholder="user"></ion-input>
        <ion-input placeholder="pass"></ion-input>
      </ion-card>
    </div>

set width as your requirements

1 Like

add class card-center in your html

<ion-card class="card-center">
     <ion-input placeholder="user"></ion-input>
     <ion-input placeholder="pass"></ion-input>
 </ion-card> 

and then
add these lines of code in your css and scss file

.card-center{
    width:90%; // adjust width on your ion-card suitable on your screen
    display:block;
    margin: 0 auto;
}

lets try @karthikmani15

1 Like

thank you friend i will try.

sorry bro i can’t your ionic version this solution is belong to ionic 3 i’ll find best solution for you
ionic 4 custom throw style styling problem
Thanks

1 Like

Try this one i wish its help for you

<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
<ion-card style="">
  <ion-card-header>
   
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Keep close to Nature's heart... and break clear away, once in awhile,
    and climb a mountain or spend a week in the woods. Wash your spirit clean.
  </ion-card-content>
</ion-card>

</div>

@karthikmani15

3 Likes

Funcionó para mi… muchas gracias @sonicwong !! :slightly_smiling_face: Ionic 6 Vue 3