問(wèn)題描述

每一列數(shù)據(jù)是由angular遍歷生成效果如下圖：

因?yàn)樽髠?cè)名稱文字多少不同，所以右側(cè)數(shù)據(jù)會(huì)出現(xiàn)偏上顯示情況，已經(jīng)試了display: table-cell; vertical-align: middle;，但是沒(méi)效果，也試了用line-height設(shè)置，但也不行，求大神指點(diǎn)，多謝啊！代碼結(jié)構(gòu)是這樣的： <ion-row *ngFor='let row of config.rows'>

<ion-col col-3>{{row.rowName}}</ion-col> <!-- 左側(cè)名稱 --> <ion-col *ngFor='let col of row.cols'>{{col.data.value}}</ion-col> <!-- 右側(cè)數(shù)據(jù) -->

</ion-row>右側(cè)三列數(shù)據(jù)是統(tǒng)一遍歷生成的

使用ionic的align-self-center，發(fā)現(xiàn)表格的框線會(huì)出問(wèn)題，求解啊啊啊啊啊

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

問(wèn)題解答

display:flex; align-items:center