Ionic (React) IonIcon - 无法对齐中心

Question

我正在尝试将图标与 Ionic (React) 的中心对齐。但是图标粘在左边，如屏幕截图所示：

多伦多证交所代码：

type WalletBtnProps = {
  icon: { ios: string; md: string };
  label: string;
};

class WalletBtn extends React.Component<WalletBtnProps> {
  render() {
    return (
      <div className="wallet-button ion-text-center">
        <IonIcon icon={this.props.icon} />
        <IonLabel>{this.props.label}</IonLabel>
      </div>
    );
  }
}

CSS:

.wallet-button {
  width: 100%;
  text-align: center;
  height: auto;
  background: rgba(190, 164, 164, 0.2);
  border-radius: 10px;
  padding: 15px;
}
.wallet-button * {
  display: block !important;
}
.wallet-button ion-icon {
  font-size: 64px;
}

关于如何解决这个问题有什么建议吗？

Answer 1

在图标 class 中添加这些 css :

width:100%;
display:flex;
align-items:center;
justify-content:center;

这些应该可以解决您的问题。

Answer 2

您可以使用 ion-tab-button，它会自动将标签居中放置在图标下方。

<div className="wallet-button">
  <IonTabButton>
    <IonIcon icon={this.props.icon} />
    <IonLabel>{this.props.label}</IonLabel>
  </IonTabButton>
</div>

.wallet-button {
  width: 100%;
  background: rgba(190, 164, 164, 0.2);
  border-radius: 10px;
  padding: 15px;
}

Ionic (React) IonIcon - 无法对齐中心

Ionic (React) IonIcon - Unable to align to the center

css

typescript

reactjs

ionic-framework

ionic4