首页 > 解决方案 > ion-align-items 类不居中 ionic HTML 元素

问题描述

我想在 ion-card 中居中放置一个 ion-img

HTML:

<ion-grid>
  <ion-row >
  
  <ion-col size="12"  class="ion-justify-content-center">
      <ion-card  button="true">
        <ion-card-content class="ion-align-items-center">
           <!--center this image-->
          <ion-img src='./assets/images/souscription-assuré.svg' ></ion-img>
           <!--center this image-->
          <h3 class='ion-text-center'>J'ai déjà une assurance</h3>
        </ion-card-content>
      </ion-card>
    </ion-col>

  </ion-row>
</ion-grid>

社会保障体系:

ion-img{
height: 20vh;
width: 20vh;    
display: block;
}

我使用了 ionic 预先构建的 css 类 ion-align-items-center 和 ion-justify-content-center 但它还没有居中

标签: htmlcssionic-framework

解决方案


您只需要将margin: auto;ion-img css 放入。


推荐阅读