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

【问题标题】：Vertical align middle ion-buttons Ionic 2垂直对齐中间离子按钮 Ionic 2
【发布时间】：2018-11-03 16:15:36
【问题描述】：

我正在 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

【问题讨论】：

标签： css ionic-framework ionic2 ionic3

【解决方案1】：

如果没有围绕元素的 CSS，很难判断，但如果添加/减去的容器具有固定高度并且是浮动的，您可以尝试这样的操作。

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

从那里你需要调整你的边距等使它看起来不错，但这应该垂直对齐它们就好了。

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

【讨论】：

我尝试了这个解决方案，但在我的问题中显示的结构化代码中不起作用。我将在 Ionic 论坛中获得的解决方案下方发布。谢谢本。
呃，我完全忘记了我用一个额外的类调整了你的代码：我添加了。然后 .foo { 高度：100px;浮动：左；}

【解决方案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>

【讨论】：

【解决方案3】：

离子 3：

通常，发生这种情况是因为您的 ion-item 具有正确的 height 但 button 不尊重它，因为它应该拉伸内部的图标。你可以通过chrome的isspect功能看到我现在所说的。因此，要使您的图标居中，您可以尝试删除它的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>

【讨论】：