如何在卡片位于离子载玻片内的地方对齐卡片内的文本

Question

我有一个 html 页面 ( example.page.htm l)，我在其中使用离子载玻片。 在每张幻灯片中，我都使用选择器（ app-test-1 和 app-test-2 ）导入其他页面。 我在 app-test-1 页面中有离子卡，为此我无法提供 alignment 以使卡中的文本左对齐。

如果我直接运行app-test-1页面，Alignment 工作完美，但当我运行← （具有“app-test-1”选择器）时，alignment 不正确。

<ion-slides>
<ion-slide>
<app-test-1></app-test>
</ion-slide>
<ion-slide>
<app-test-2></app-test-1>
</ion-slide>
</ion-slides>

Answer 1

我也面临同样的问题。 我在ion-slides内安装了ion-card ，但所有对齐位置都错了。 我尝试将 CSS class 用于 ion-slide with text-left 并且它起作用了。 我认为这是因为离子载玻片最终会将其全部放在中心。

示例代码：HTML；

<ion-slides>
  <ion-slide class="styless">
    <ion-card>
      <ion-card-header>
        Welcome
      </ion-card-header>
      <ion-card-content>
        HI ... Contenet goes here(without slide-1)
      </ion-card-content>     
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card>
      <ion-card-header>
        Welcome
      </ion-card-header>
      <ion-card-content>
        HI ... Content goes here(slide -2)
      </ion-card-content>     
    </ion-card>
  </ion-slide>

</ion-slides>```

in scss:
.styless {
text-align: left;
}