将 ion-fab 按钮水平居中对齐答案

【问题标题】：Align ion-fab buttons horizontal center将 ion-fab 按钮水平居中对齐
【发布时间】：2019-01-11 13:57:17
【问题描述】：

我是 ionic 新手。这是我关于 ionic 的第一个问题。希望我能从离子专家那里得到正确的解决方案：

所以基本上，我有 3 个用于社交登录的 ion-fab 按钮，我想将它们水平居中对齐，如下所示：

我尝试了很多解决方案，但没有运气。这是我的代码：

  <ion-fab bottom center>
<ion-row text-center>
  <ion-col>
    <button ion-fab fab-fixed color="primary" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon></button>
  </ion-col>
  <ion-col>
    <button ion-fab fab-fixed color="danger" (click)="googleLogin()"><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-col>
  <ion-col>
    <button ion-fab fab-fixed color="secondary" (click)="twitterLogin()"><ion-icon name="logo-twitter"></ion-icon></button>
  </ion-col>
</ion-row>

这就是我使用上面的代码得到的。那么，我哪里错了？

【问题讨论】：

你能发一张它现在的样子吗？
我添加了显示的屏幕截图。

标签： angular ionic-framework ionic3

【解决方案1】：

像这样从 ion-fab 标签中移除 center 属性

  <ion-fab bottom>
    <ion-row text-center>
      <ion-col>
        <button ion-fab fab-fixed color="primary" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon></button>
      </ion-col>
      <ion-col>
        <button ion-fab fab-fixed color="danger" (click)="googleLogin()"><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-col>
      <ion-col>
        <button ion-fab fab-fixed color="secondary" (click)="twitterLogin()"><ion-icon name="logo-twitter"></ion-icon></button>
      </ion-col>
    </ion-row>
  </ion-fab>

在你的 scss 文件中添加这个样式

  ion-fab{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }

Screenshot

这是flexbox 的不错指南。

【讨论】：

【解决方案2】：

有点晚了，你可以试试这个

<ion-grid>
  <ion-row nowrap>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="primary">
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-fab-button>
    </ion-col>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="secondary">
        <ion-icon name="logo-twitter"></ion-icon>
      </ion-fab-button>
    </ion-col>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="tertiary">
        <ion-icon name="logo-instagram"></ion-icon>
      </ion-fab-button>     
    </ion-col>
    <ion-col>
      <ion-fab-button size="small" fab-fixed color="danger">
        <ion-icon name="settings"></ion-icon>
      </ion-fab-button>
    </ion-col>
  </ion-row>
</ion-grid>

Screenshot

【讨论】：