首页 文章

Ionic 3，ion-col内容必须对齐中间

提问于
浏览 次
1

我有一个表格式设计，离子行中的两个离子色列具有不同的行数 . 但我需要在中间对齐两个内容 . 什么是最好的解决方案？

<ion-content padding>
  <ion-grid>
    <ion-row>
       ....other cols....
       <ion-col col-6>
        <label>Date of Audit:
          <h2>01/30/18

          1:06:50<small>PM UTC</small></h2>
        </label>
      </ion-col>
      <ion-col col-6 text-center center class="overall-score">
        <label>Overall Score:
          <h1>40%</h1>
        </label>
      </ion-col>
   </ion-row>
  </ion-grid>
</ion-content>
ionic-framework ionic3

3 回答

  • 0

    创建一个新的css类：

    .align-text-middle {
    display: flex;
    align-items: center;
}

    并将该类添加到ion-col .

    回复于
  • 0

    需要将样式应用于ion-col，以使其内容居中 .

    CSS：

    ion-col {
  text-align: center;
}

    要么

    HTML：

    <ion-col class="someclass">

    CSS：

    ion-col.someclass {
  text-align: center;
}
    回复于
  • 0

    添加离子行

    <ion-col>
  <ion-row style="min-height:100%" justify-content-center align-items-center>
    <p>test</p>
  </ion-row>
</ion-col>
    回复于

相关问题