css - ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中？

问题描述

每一列数据是由angular遍历生成效果如下图：

因为左侧名称文字多少不同，所以右侧数据会出现偏上显示情况，已经试了display: table-cell; vertical-align: middle;，但是没效果，也试了用line-height设置，但也不行，求大神指点，多谢啊！代码结构是这样的： <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>右侧三列数据是统一遍历生成的

使用ionic的align-self-center，发现表格的框线会出问题，求解啊啊啊啊啊

<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>

问题解答

display:flex; align-items:center