将离子晶圆按钮水平居中对齐

Question

我是离子的新手。这是我对离子的第一个问题。希望我能从离子专家那里得到适当的解决方案：

所以基本上，我有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>

这就是我上面使用的代码。所以，我哪里错了？

Answer 1

像这样从ion-fab标签中删除中心属性

  <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的不错指南。

Answer 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