在 Ionic Grid (v7) 中垂直居中卡片

Question

我有 2 张卡片想要垂直居中。 在大屏幕上，卡片应并排位于同一行。行应居中。 在小屏幕上，卡片应位于另一张卡片的下方。

我尝试使用文档中指定的

ion-justify-content-center

，但没有成功。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>Home</ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content color="primary" class="ion-padding">
 <ion-grid>
    <ion-row class="ion-justify-content-center ion-align-items-center">

      <ion-col size="12" size-sm="12" size-lg="12">
        <div class="ion-text-center">
          CENTERED TITLE
        </div>
      </ion-col>

      <ion-col size="12" size-sm="12" size-lg="6">
         <ion-card [button]="true" class="ion-padding">
              ...
         </ion-card>
      </ion-col>
      <ion-col size="12" size-sm="12" size-lg="6">
         <ion-card [button]="true" class="ion-padding">
              ...
         </ion-card>
      </ion-col>
   </ion-row>
</ion-grid>
</ion-content>

我应该在大屏幕上看到类似的东西

===========================



       centered title

 *******            *******
 *******            *******
 *******            *******
 


============================

就像这样在小屏幕上

===================


  centered title

     *******
     *******
     *******

     *******
     *******
     *******
 

===================

我所拥有的是下面这个：

===========================
       centered title

 *******            *******
 *******            *******
 *******            *******
 





============================

Answer 1

您的代码确实按预期运行，卡片在较小的设备上逐行排列，在较大的设备上并排排列。但是，如果您遇到任何问题，请考虑以下建议：

要根据屏幕宽度调整大小，CSS 媒体查询是一种有效的解决方案。以下是如何实现它们来修改代码：

@media only screen and (max-width: 400px) {
  .ion-col {
    width: 50%; /* Set the width to 50% on screens with a maximum width of 400px */
  }
}

使用此 CSS 片段，当屏幕宽度为 400 像素或更小时，每列 (ion-col) 将占据宽度的 50%，从而允许卡片在较小的设备上垂直堆叠。

您可以将此 CSS 合并到单独的样式表中或 HTML 文档的标签中。确保将其放置在任何其他 CSS 规则之后，以确保正确覆盖。这种方法应该有助于解决您可能遇到的任何显示问题。