如何在 Ionic 4 的中心 fab 按钮上设置？

Question

我有两个问题：

中间如何正确设置？ 请不要在离子卡后面我测试了很多东西但是问题是 fab 按钮隐藏在离子卡后面，我的代码：

  <ion-grid>
      <ion-row>
        <ion-col text-wrap>
          <ion-card-content color="medium">
            {{ object.body }}
          </ion-card-content>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-fab-button color="danger" [disabled]="disableButton">
            <ion-icon name="flame" (click)="soSad()"></ion-icon>
          </ion-fab-button>
        </ion-col>
      </ion-row>
    </ion-grid>

我怎样才能正确排序带有徽章的图标，使其看起来很棒？我的意思是，图标和徽章更接近，下一个图标徽章紧接着有点space，或者我可以接受一些想法:)我的代码是：

      <ion-card-content>
            <ion-grid>
                <ion-row align-items-start>
                    <ion-col>
                        <ion-icon name="eye"></ion-icon>
                    </ion-col>
                    <ion-col>
                            <ion-badge color="secondary">{{ object.see }}</ion-badge>
                    </ion-col>
                    <ion-col>
                        <ion-icon name="flame"></ion-icon>
                    </ion-col>
                    <ion-col>
                        <ion-badge color="danger">{{ object.zharko }}</ion-badge>
                    </ion-col>
                    <ion-col>
                        <ion-icon name="star"></ion-icon>
                    </ion-col>
                    <ion-col>
                        <ion-badge color="warning">{{ object.fav }}</ion-badge>
                    </ion-col>
                </ion-row>                     
            </ion-grid>
        </ion-card-content>

更新：

代码的新问题:S 现在我需要解决这个问题，因为我不需要重叠文本，也许在离子卡底部边缘的中间？但不在离子卡后面，有什么想法吗？

Answer 1

<ion-card-content>
        <ion-fab vertical="center" horizontal="start" slot="fixed">
          <ion-fab-button>
            <ion-icon name="share"></ion-icon>
          </ion-fab-button>
       </ion-fab>
        <ion-grid>
            <ion-row align-items-start>
                <ion-col>
                    <ion-icon name="eye"></ion-icon>
                </ion-col>
                <ion-col>
                        <ion-badge color="secondary">{{ object.see }}</ion-badge>
                </ion-col>
                <ion-col>
                    <ion-icon name="flame"></ion-icon>
                </ion-col>
                <ion-col>
                    <ion-badge color="danger">{{ object.zharko }}</ion-badge>
                </ion-col>
                <ion-col>
                    <ion-icon name="star"></ion-icon>
                </ion-col>
                <ion-col>
                    <ion-badge color="warning">{{ object.fav }}</ion-badge>
                </ion-col>
            </ion-row>                     
        </ion-grid>
    </ion-card-content>

对你有帮助。

如何在 Ionic 4 的中心 fab 按钮上设置？

How to set on the center fab button on Ionic 4?

css

ionic4