垂直对齐中间离子按钮2 我开发了一个购物车页面在离子2，我有以下代码，我试图对齐按钮与文本垂直在中间位置。我尝试了垂直对齐：中间CSS，但没有成功 <ion-list> <ion-item *ngFor="let product of this.productsCollection"> <ion-buttons end> <button ion-button icon-only clear outline (click)="decreaseProduct()"> <ion-icon name="remove-circle"></ion-icon> </button> <span>{{this.quantityProducts}}</span> <button ion-button icon-only clear outline (click)="increaseProduct()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-item> {{this.quantityProducts}}

上述代码的图像结果：

---

如果元素周围没有CSS很难判断，但是如果添加/删除的容器具有固定高度并且是浮动的，您可以尝试类似的方法

button,
span {
  position: relative;
  top: 50%;
  float:left;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

从那以后，你需要调整你的边距等，使它看起来不错，但这应该垂直对齐他们刚刚好

您可以在这里看到一个粗略的示例：

通过以下方式获得的解决方案：

0

3： 通常，发生这种情况是因为您的

离子项目

具有正确的

高度

，但是

按钮

不尊重它，因为它会拉伸图标内部。 你可以通过chrome的ispect功能看到我现在所说的。 因此，要使图标居中，您可以尝试删除它的

填充

和

边距

，只留下与左右边框的距离：

.my-left-icon {
    margin: 0px 0px 0px 10px !important;
    padding: 0 !important;
}
.my-right-icon {
    margin: 0px 10px 0px 0px !important;
    padding: 0 !important;
}

然后在代码中应用css：

<ion-list>
  <ion-item *ngFor="let product of this.productsCollection">
    <ion-buttons end>
      <button ion-button icon-only clear class="my-left-icon" (click)="decreaseProduct()">
        <ion-icon name="remove-circle"></ion-icon>
      </button>
      <span>{{this.quantityProducts}}</span>
      <button ion-button icon-only clear class="my-right-icon" (click)="increaseProduct()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
  </ion-buttons>
</ion-item>

{{this.quantityProducts}}

我尝试了这个解决方案，但没有使用我在问题中展示的结构化代码。我将在下面发布我在离子论坛上获得的解决方案。谢谢Ben，我完全忘了我用一个额外的类调整了你的代码：我添加了。Then.foo{height:100px；float:left；}

<ion-list>
  <ion-item *ngFor="let product of this.productsCollection">
    <ion-buttons end>
      <button ion-button icon-only clear class="my-left-icon" (click)="decreaseProduct()">
        <ion-icon name="remove-circle"></ion-icon>
      </button>
      <span>{{this.quantityProducts}}</span>
      <button ion-button icon-only clear class="my-right-icon" (click)="increaseProduct()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
  </ion-buttons>
</ion-item>