html - How to center a row of ion-fabs?

Question

I want to center vertically and horizontally this row of ion-fabs, but at the moment it sits on the top and into the start position, I've tried every single html/css trick, but it doesn't work. I have to mention that I'm working it on a modal (I don't know if it's relevant or not, but whatever) soo, here's my example

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-fab-button size="large" fab-fixed color="danger">
          <ion-icon name="trash-outline"></ion-icon>
        </ion-fab-button>
      </ion-col>
      <ion-col>
        <ion-fab-button size="large" fab-fixed color="primary">
          <ion-icon name="camera-outline"></ion-icon>
        </ion-fab-button>
      </ion-col>
      <ion-col>
        <ion-fab-button size="large" fab-fixed color="secondary">
          <ion-icon name="image-outline"></ion-icon>
        </ion-fab-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

标签： htmlcssionic-framework

Answer 1

Using CSS Flexbox to horizontally and vertically align the column content along the main and cross axis seems to do the trick. I wasn't sure if you were using the ionic-framework with React or Angular but after getting into a sandbox environment, I found out it was indeed angular by the casing of the tag names.

Here is the StackBlitz Demo to have a look at.

I included a code snippet below but the icons aren't rendering in so I added some text to show everything is still working in terms of vertically/horizontally centering. The ionic-framework isn't included so the ion-grid also is not styling correctly but just look at the StackBlitz sandbox link for a better representation.

ion-col {
  border: 1px solid grey;
  height: 8rem; /* alter or remove this */
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<ion-app>
  <ion-header>
    <ion-toolbar>
     <ion-title>Flexbox Centering Demo</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content padding>
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-fab-button size="large" fab-fixed color="danger">
          Some Text
            <ion-icon name="trash-outline"></ion-icon>
          </ion-fab-button>
        </ion-col>
        <ion-col>
          <ion-fab-button size="large" fab-fixed color="primary">
          Some Text
            <ion-icon name="camera-outline"></ion-icon>
          </ion-fab-button>
        </ion-col>
        <ion-col>
          <ion-fab-button size="large" fab-fixed color="secondary">
           Some Text
            <ion-icon name="image-outline"></ion-icon>
          </ion-fab-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-app>