title: Text centered below ion-avatar inside ion-grid
body: <p>i would like to achieve this result :</p>
  
  <p><a href="https://i.stack.imgur.com/DRl83.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DRl83.png" alt="enter image description here"></a></p>
  
  <p>currently this is what i use to achieve this :</p>
  
  <pre><code>&lt;ion-row no-padding align-items-center&gt;
    &lt;ion-col col-4&gt;
      &lt;ion-item class="avatars nobackground" icon-start no-lines text-left&gt; . 
        &lt;ion-icon name="stopwatch"&gt;&lt;/ion-icon&gt;
        1h
       &lt;/ion-item&gt;
    &lt;/ion-col&gt;
    &lt;ion-col col-8&gt;
      &lt;ion-item no-lines text-left&gt;
        &lt;ion-avatar text-center&gt;
          &lt;img [src]="workout.coach?.image_name" /&gt;
        &lt;/ion-avatar&gt;
        &lt;span&gt;{{ workout.coach?.firstname }} {{ workout.coach?.lastname }}&lt;/span&gt;
       &lt;/ion-item&gt;
     &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  </code></pre>
  
  <p>This gives me this :</p>
  
  <p><a href="https://i.stack.imgur.com/bhb0Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhb0Z.png" alt="enter image description here"></a></p>
  
  <p>As you can see the text isn't centered below the ion-avatar i've tested <code>text-center</code> property in <code>ion-item</code> containing the text and the ion-avatar but this doesn't seem to work...</p>
  
  <p>By the way if you also have a suggestion to have the <code>ion-col</code> perfectly centered i will take it aswell.</p>
  
  <p>Edit 1:</p>
  
  <p>Thanks to @Phonolog i've managed to get it centered perfectly, now if someone as a suggestion to reduce first <code>ion-row</code> height to match first picture perfectly it would be great &lt;3, i've tried to modify height property with no success. (I'm the worst front-end developper).</p>
  
  <p>Regards,
  Thomas.</p>