css - 离子（反应）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;
}

有关如何解决此问题的任何建议？

标签： cssreactjstypescriptionic-frameworkionic4

Answer 1

在图标类中添加这些 css ：

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

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