如何使离子文本居中？

Question

我正在尝试将离子文本垂直居中在两个按钮之间。 这是我的尝试。

ion-toolbar {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-text {
  font-size: 1.5rem;
  padding-left: 2%;
  padding-right: 2%;
}

我也尝试过在离子文本上垂直居中对齐，但它不在中间。如何让它精确到中间？

我正在本地尝试最新的（8）离子版本。

Answer 1

在

ion-button

内部使用

ion-toolbar

时，建议将其包装在

ion-buttons

组件中。

将按钮包裹在

ion-buttons

组件中将自动处理样式并正确对齐内容。

<ion-toolbar>
  <ion-buttons>
    <ion-button fill="solid" color="primary">
      <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
    <ion-text color="primary">911</ion-text>
    <ion-button fill="solid" color="primary">
      <ion-icon slot="icon-only" name="remove"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>