Make ion content (or text or label) vertically center

Question

I want to achieve something like this:

But I am currently in that stage

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>

Answer 1

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 :

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.

Answer 2

I don't use Ionic, but normally people do this in CSS to vertically align some text to the center:

{
    display: table-cell;
    vertical-align: middle;
}

or

{
    line-height: 50px;  /* assuming the height of the element is 50px */
}

You may also wish to consider the 'padding-top' property, which is not quite automatic like the above.

2. Just use margin-left, eg.:

{ margin-left: 1vw; }