Search code examples
htmlcssangularionic-frameworkionic4

Make ion content (or text or label) vertically center


I want to achieve something like this:

enter image description here

But I am currently in that stage

enter image description here

Note that, first image is bootstrap form , 2nd image is what I am designing with ionic [ there are some reasons I don't want to drag bootstrap in my ionic project, so, obviously everything will not be 100% perfect in look, but I want to get something closer to it]

My Question is:

  1. How can I set Item name to vertically center ? [ see 2nd image, I already tried justify-content-center && align-items-center ]
  2. How can I align text of Item name to Apple (like first image) [ i tried class="ion-float-left" but it seems if i give it or not, in 2nd image, Item name stays the same, also if I put the whole ion-row (see code) under ion-list, it looks horrible ]

Here is my ionic code

product-list.page.html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Stock</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button (click)=onBackButtonPressed() color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list *ngIf="currentList">
              <ion-item *ngFor="let item of currentList" (click)="setIonList(item)">
                {{item}}
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Solution

  • Wrap the <ion-grid> under a <div> and at the div make height: 100% (you need vertical center, so the wrapper should be 100%) , then display: flex; align-items: center; justify-content: center;
    I am affecting <ion-grid> with <div>, make sure

    1. Anything else isn't affecting <ion-grid> other than <div>
    2. Your <div> isn't affected by something else

    Otherwise, you might need a different implementation.

    Finally it looks like it :

    enter image description here

    Here is code:

      <ion-grid>
        <ion-row>
          <ion-col size-md="6" offset-md="3">
            <ion-card>
              <ion-card-header>
                <ion-card-title>
    
                </ion-card-title>
              </ion-card-header>
              <ion-card-content>
    
                <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
                  <ion-col>
                    <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
                  </ion-col>
                  <ion-col>
                    <ion-button  color="secondary" class="ion-float-right" size="small">
                      Back
                    </ion-button>
                  </ion-col>
                </ion-row>
                
                <ion-list >
                  <ion-item>
                    <ion-text>Hi</ion-text>
                  </ion-item>
                  <ion-item>
                    <ion-text>Hello</ion-text>
                  </ion-item>
                </ion-list>
    
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
    
    
    </div>
    

    Credits:

    From Ionic forum, I have got help from this question :

    https://forum.ionicframework.com/t/ion-card-center-alignment/170521/8

    Check saad-ansari 's reply there.