当使用ngIf时，div中的Angular - Spans不是居中对齐的

Question

我在AngularJS中有一些代码

div中有3个跨度。跨度有ngIf。问题是，如果仅根据ngIf条件显示一个跨度，则它不是居中对齐的。如何让它成为一个中心？

<div class="text-center margin-top-tiny padding-top-xlarge" [hidden]="!showBalancePastDueOrFees">
  <div class="margin-top-tiny">
    <span class="padding-vert-small">
      <a class="button w-xtiny font-20 no-icon no-focus-effect text-center normal-weight" *ngIf="(isCashAcceptorAvailable && !hideCash)" (click)="checkFlowType(cashPaymentType)">{{msgCash | translate}}</a>
    </span>
    <span class="padding-vert-small">
      <a class="button w-xtiny font-20 no-icon no-focus-effect text-center normal-weight" *ngIf="(isCardReaderAvailable && !hideCreditDebit)" (click)="checkFlowType(creditdebitPaymentType)">{{msgCrDb | translate}}</a>
    </span>
    <span class="padding-vert-small">
      <a class="button w-xtiny font-20 no-icon no-focus-effect text-center normal-weight" *ngIf="(!hideGiftCard)" (click)="checkFlowType(giftCardPaymentType)">{{msgGc | translate}}</a>
    </span>
  </div>
</div>