如何在Ion-Grid单行中垂直对齐头像与文本内容？

问题原因 #

你的代码里<ion-title>和嵌套的<h1>自带默认垂直边距，导致ion-align-items-center的居中效果被抵消，并非Grid组件本身的问题。

方案1：纯Ionic原生实现（推荐） #

删掉多余的<h1>，直接用<ion-title>的内置样式，同时给文本所在列添加ion-align-self-center类确保内容垂直居中：

<ion-grid [fixed]="true">
  <ion-row class="ion-align-items-center">
    <ion-col size="auto">
      <ion-avatar>
        <img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
      </ion-avatar>
    </ion-col>
    <ion-col class="ion-align-self-center">
      <ion-title>12345</ion-title>
    </ion-col>
  </ion-row>
</ion-grid>

方案2：保留<h1>的Ionic类修复 #

如果必须保留<h1>，使用Ionic内置的ion-margin-vertical-0类清除h1的默认垂直外边距：

<ion-grid [fixed]="true">
  <ion-row class="ion-align-items-center">
    <ion-col size="auto">
      <ion-avatar>
        <img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
      </ion-avatar>
    </ion-col>
    <ion-col>
      <ion-title><h1 class="ion-margin-vertical-0">12345</h1></ion-title>
    </ion-col>
  </ion-row>
</ion-grid>

方案3：CSS兜底方案 #

如果上述Ionic原生方法无效，直接通过CSS清除垂直间距：

ion-title h1 {
  margin: 0;
  line-height: inherit;
}
ion-title {
  padding: 0;
}

内容的提问来源于stack exchange，提问作者Pablo