search

Home  >  Q&A  >  body text

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

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>

给我你的怀抱给我你的怀抱2781 days ago1428

reply all(1)I'll reply

  • 巴扎黑

    巴扎黑2017-06-15 09:25:53

    display:flex; align-items:center

    reply
    0
  • Cancelreply