Ionic 如何在离子束中水平地使元素居中？

wgxvkvu9 于 2022-12-08 发布在 Ionic

关注(0)|答案(2)|浏览(149)

我想把一个元素在水平方向上居中，左右两边的边距相同

<div class="tabs-group" class="ion-justify-content-center">

  <ion-row>
    <ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]] ? 'primary-button' : 'secondary-button'">
      <ion-grid>
        <ion-row>
        </ion-row>
        <ion-row>
          <ion-col>
            <b>{{tabsName[j]}} </b>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-col>

  </ion-row>

</div>

ion-justify-content-center离子CSS类未应用居中，输出如下：

ionic-framework

来源：https://stackoverflow.com/questions/66585191/how-to-center-horizontally-an-element-in-ionic

2条答案

按热度按时间

xt0899hw1#

你必须在一个flexbox节点上使用ion-justify-content-center，所以要么把display: flex放在你的 Package 器div节点上，要么就像这样在<ion-row>上使用ion-justify-content-center。

<ion-row class="ion-justify-content-center">
      <ion-col>
        <b>{{tabsName[j]}} </b>
      </ion-col>
</ion-row>

赞(0）回复(0）举报 2022-12-08

wqnecbli2#

<ion-grid style="height: 100%"> <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column"> <div text-center> <ion-icon name="images" style="zoom:5.0;" color="medium"></ion-icon> <h4>No Image Found</h4> <p>Looks like there are no converted image available at this moment, Please click <b> <ion-icon name="git-compare" color="medium" style="zoom:2.0;"></ion-icon> </b> button to convert a image</p> </div> </ion-row> </ion-grid>
https://codevampires.com/place-content-horizontally-vertically-in-center-ionic4/

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic 如何在离子束中水平地使元素居中？

2条答案

相关问题

热门标签

最新问答