css - 垂直对齐中间 ionic 按钮 Ionic 2

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>

上述代码的图像结果: /image/yfeL6.png

Answer 1

如果你的元素周围没有 CSS 很难判断，但如果你的添加/减去容器有一个固定的高度并且是 float 的，你可以尝试这样的事情。

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

从那里您需要调整边距等以使其看起来不错，但这应该可以很好地垂直对齐它们。

你可以在这里看到一个粗略的例子:JSFIDDLE