如何在 ionic 3 的页脚中居中按钮？

Question

我想在 ion-footer 中实现三个 ion-button，每个算法分别向左、中和右对齐。看来 ion-button 与 start 和 end 可以做左右。

中间呢？我已经检查了 API 和 ion 组件，似乎 ion-title 默认情况下居中，但是没有开箱即用的方法让按钮位于中间？

Answer 1

您可以将float-start和float-end分别添加到第一个和第三个按钮。通过使用 float-[start|end] 而不是 float-[left|right]，您的按钮将随着应用 direction

移动位置

HTML:

<ion-footer>
  <div class="btn-wrapper">
    <button ion-button float-start>Button1</button>
    <button ion-button>Button2</button>
    <button ion-button float-end>Button3</button>
  </div>
</ion-footer>

CSS:

.btn-wrapper {
    text-align: center;
}

编辑： 为按钮添加了一个环绕 <div> 并赋予它样式 text-align: center;，因为我在没有环绕 <div>.

的情况下遇到了奇怪的动画行为

Answer 2

在 ion-footer 元素中，尝试使用 ion-grid，然后从网格中删除填充。

<ion-footer>
    <ion-grid>
        <ion-row no-padding no-margin>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 1</button>
            </ion-col>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 2</button>
            </ion-col>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 3</button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-footer>

如何在 ionic 3 的页脚中居中按钮？

How to center a button in footer in ionic 3?

ionic-framework

ionic2

ionic3