Ionic 将离子图标与文本对齐

0dxa2lsx 于 2023-04-03 发布在 Ionic

关注(0)|答案(1)|浏览(185)

我不知道如何将我的Ionicons与文本对齐。我找到了this，但我很少使用CSS，所以无法理解它...
如何让ionicon的垂直中心与ion-col项目内的文本对齐？第一个ion-col单元格的对齐也被破坏了...
密码

<ion-row>
            <ion-col size="3">
                23C
            </ion-col>
            <ion-col size="3">Text
                <ion-icon name="arrow-up-outline" size="small"
                    [ngStyle]="{'transform': 'rotate(180deg)'}">
                </ion-icon>
            </ion-col>
            <ion-col size="3">Text
                <ion-icon name="arrow-up-outline" size="small"
                    [ngStyle]="{'transform': 'rotate(45deg)'}">
                </ion-icon>
            </ion-col>
        </ion-row>

ionic-framework

来源：https://stackoverflow.com/questions/75903166/align-ionicons-with-text

1条答案

按热度按时间

uqjltbpv1#

你可以使用flexbox来对齐你的图标和文本。我给了一个类名ion-col来将flexbox只应用于那些元素。
https://imgur.com/h0391YQ

<ion-row>
  <ion-col size="3">
      23C
  </ion-col>
  <ion-col class="my-class" size="3">Text
      <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(180deg)'}"></ion-icon>
  </ion-col>
  <ion-col class="my-class" size="3">Text
      <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(45deg)'}"></ion-icon>
  </ion-col>
</ion-row>

ion-row {
    display:flex; 
  }
  ion-col {
    padding:10px;
  }
  .my-class {
    display: flex;    
  }

赞(0）回复(0）举报 2023-04-03

我来回答

Ionic 将离子图标与文本对齐

1条答案

相关问题

热门标签

最新问答