垂直对齐中离子离子离子2

Question

我正在开发Ionic 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>

上述代码的图像结果：https://i.stack.imgur.com/yfel6.png

Answer 1

如果没有元素周围的CSS，很难说出，但是如果您的添加/提取的容器具有固定的高度并且正在漂浮，则可以尝试类似的东西。

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

从那里您需要调整保证金，以使其看起来不错，但这应该垂直对齐它们。

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

Answer 2

在https://forum.ionicframework.com/t/vertical-align-middle-ion-buttons/81215中获得的解决方案：

<ion-list>
  <ion-item *ngFor="let product of this.productsCollection">
    <button ion-button item-right icon-only color="danger" clear outline>
      <ion-icon name="remove-circle"></ion-icon>
    </button>
    <span item-right>0</span>
    <button ion-button item-right icon-only color="secondary" clear outline>
      <ion-icon name="add-circle"></ion-icon>
    </button>
  </ion-item>
</ion-list>

Answer 3

离子3：

通常，这是因为您的ion-item具有正确的height，但是button不尊重它，因为它应该在内部拉伸图标。您可以看到我现在所说的Chrome的功能。因此，要居中您的图标，您可以尝试删除其padding，而margin仅留下距左右边框的距离：

.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>