如何将项目与 ionic css 实用程序对齐？

Question

我正在用 ionic 做一个小的 UI，我正在寻找 css 实用程序（https://ionicframework.com/docs/layout/css-utilities）。

我有这个UI:

<ion-item>
  <ion-grid >
    <ion-row  class="ion-align-items-center">
      <ion-col size="4" class="ion-text-center">
        <ion-avatar ><ion-img [src]="(loggedUser$ | async).avatarUrl"></ion-img></ion-avatar>
      </ion-col>
      <ion-col size="8" >        
        <ion-label  >
          <h2>{{ (loggedUser$ | async).userId }}</h2>
        </ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

但目前，ion-avatar 在他 ion-col 的左边。

有没有办法使用那些 Ionic css 实用程序将 ion-avatar 居中放置在列的中间？

Answer 1

您需要额外添加一个 div，如图所示。

据我所知，原因是离子框架如何创建阴影 dom。如果您没有明确添加要添加 CSS 实用程序的 div，ionic 会将其应用到错误的位置。

<ion-item>
 <ion-grid >
   <ion-row  class="ion-align-items-center">
     <ion-col size="4">
      <div class="ion-text-center">
        <ion-avatar ><ion-img [src]="(loggedUser$ | async).avatarUrl"></ion-img></ion-avatar>
      </div>
     </ion-col>
     <ion-col size="8" >        
    <ion-label>
      <h2>{{ (loggedUser$ | async).userId }}</h2>
    </ion-label>
   </ion-col>
  </ion-row>
 </ion-grid>
</ion-item>

如何将项目与 ionic css 实用程序对齐？

How to align items with ionic css utilities?

css

ionic-framework

ionic4