Question

在我的IONIC 4应用程序中，我尝试在vertical-align / div元素内ion-row插入ion-col。这种方法有效，但是第二个ion-col（里面有一个ion-icon）弄乱了行的高度（可以通过边框看到）。

所以我有以下html设置（仅显示重要的部分）：

<ion-content>
    <ion-row class="top-icons ion-text-center">
    <ion-col class="ion-padding">
      <div class="element-color" [style.backgroundColor]="getColorString(el)"></div>
    </ion-col>
    <ion-col class="ion-padding">
      <ion-icon name="warning" color="danger" *ngIf="el.IsCcp"></ion-icon>
      <ion-icon name="cog" *ngIf="!el.IsCcp"></ion-icon>
    </ion-col>
    </ion-row>

    .. Other stuff

html的sccs：

.top-icons > ion-col {
    border-top: 1px solid var(--ion-color-lightGray);
    border-bottom: 1px solid var(--ion-color-lightGray);

    .element-color {
      width: 22px;
      height: 22px;
      border-radius: 7px;
      margin: 0 auto;
    }

    ion-icon {
      font-size: 1.7em;
      padding-top: 2px;
    }

    &:first-child {
      border-right: 1px solid var(--ion-color-lightGray);
    }
}

.title {
  font-size: 1.1rem;
}

p {
    margin: 5px 0;
    font-size: 0.9rem;
}

这将导致以下结果，但是问题是离子束元素中的div不是vertical-aligned，而ion-icon是：

仔细观察时，很明显div在ion-col中没有垂直对齐：

我认为我可以使用ion-align-items-center上的IONIC css实用程序ion-row来解决此问题：

<ion-content>
  <ion-row class="top-icons ion-text-center ion-align-items-center">
    <ion-col class="ion-padding">
        <div class="element-color" [style.backgroundColor]="getColorString(el)"></div>
    </ion-col>
    <ion-col class="ion-padding">
      <ion-icon name="warning" color="danger" *ngIf="el.IsCcp"></ion-icon>
      <ion-icon name="cog" *ngIf="!el.IsCcp"></ion-icon>
    </ion-col>
  </ion-row>

    .. Other stuff

以下结果，但不幸的是引入了一个新问题：

所以现在div是垂直对齐的，但是与其他离子col相比，离子col本身已经移动了：

可以通过将font-size的{{1}}改回其原始字体来解决此问题，但这会使图标变小。：

有什么想法可以使它正常工作吗？

在ion-col内部垂直对齐div-IONIC 4

0 个答案: