Question

我正在开发Ionic 2中的购物车页面，我有以下代码，我正在尝试将按钮与文本垂直对齐在中间位置。我尝试使用vertical-align：middle 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围绕你的元素很难分辨，但如果你的add / substract的容器有一个固定的高度并且是浮动的，你可以试试这样的东西。

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

IONIC 3：

通常，发生这种情况是因为您的ion-item具有正确的height，但是button不尊重它，因为它应该在其中拉伸图标。您可以看到我现在用chrome的ispect函数说的话。因此，要使图标居中，您可以尝试将其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>

垂直对齐中间离子按钮Ionic 2

3 个答案:

IONIC 3：