Ionic - Center Text Vertically in Item-List with Item-Avatar Class

Ionic - Center text vertically in item-list with item-avatar class

You can try to use this css:

.item-text-center
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    position: absolute;
    top: 0;
    height: 100%;
}

and apply it to your <div>

<div class="item-text-center item-text-wrap">{{x.name}}</div>

and this is the whole content:

  <ion-content class="padding">
    <ion-list>
      <ion-item class="item-thumbnail-left item-icon-right" collection-repeat="x in y">
        <img src="img/{{x.icon}}.png">
        <div class="item-text-center item-text-wrap">{{x.name}}</div>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>

This ionic play might help you.

Ionic - ion-item text is not vertically centered when ion-icon is bigger

Try this. Add a <span> element to the text, vertical-align only works with elements inline side by side :

CSS

.icon {
 display: inline-block;
 font-size: 35px;
 color: #ffC977;
 vertical-align: middle;
}

.text{
  display: inline-block;
  vertical-align: middle;
}

HTML

<ion-item>
  <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
  <span class="text">Recent</span>
</ion-item>

Make ion content (or text or label) vertically center

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.

Ionic: Center text vertically in card

You need to set the line height for the .item class and the vertical-align in the h1 and h2 sould work:

.item{ line-height: Xpx;}
.item .h1{ vertical-align:middle; }
.item .h2{ vertical-align:middle; }

UPDATE

You could use

position:relative;top:50%; transform: translateY(-50%);

In the h2.

How to place ion-avatar top-left of an ion-item?

There are no css properties to achieve this in Ionic.
But it is possible by overwriting the css of the ion-avatar and ion-label.

Change the position of the avatar to absolute and place it in the top corner of the item. Then adjust the label margin to place the text back where you want it.

ion-avatar{
  position: absolute;
  top: 0px;
  left: 0px;
}

ion-label{
  margin-left: // size needed
}

---

Example output:

How to center ionic avatar on a page

add a class in the avatar div.

.avatar{
   margin: auto;
}

Ionic 3 how to Vertically center text in custom ion-input?

What I do is:

.vertical-align {    
    display: flex !important;
    align-content: center !important;
    align-items: center !important;
}

You can remove the !important, I just used them here because I had other classes interfiering.

---

Related Topics