css - How does the grid layout in ionic allow the content in each column with varying text content to be vertically centered?

Question

Each column of data is generated by angular traversal
The effect is as follows:

Because the name text on the left side is slightly different, the data on the right side will be displayed upward. I have tried display: table-cell;
vertical-align: middle;, but it has no effect. I also tried using line. -height setting, but it doesn’t work either. Please give me some advice. Thank you!
The code structure is like this:
<ion-row *ngFor="let row of config.rows">

    <ion-col col-3>{{row.rowName}}</ion-col>  <!-- 左侧名称 -->
    <ion-col *ngFor="let col of row.cols">{{col.data.value}}</ion-col>  <!-- 右侧数据 -->

</ion-row>
The three columns of data on the right are generated by unified traversal

Using ionic's align-self-center, I found that there is a problem with the frame lines of the table. Please solve it

<ion-row *ngFor="let row of config.rows">

    <ion-col col-3> {{row.rowName}}</ion-col>
    <ion-col align-self-center>
      <ion-row>
        <ion-col *ngFor="let col of row.cols">{{col.data.value}}
        </ion-col>
      </ion-row>
    </ion-col>

</ion-row>

Answer 1

display:flex; align-items:center