首页 文章

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

提问于
浏览 次
0

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

3 回答

  • 0

    没有CSS围绕你的元素很难分辨，但如果你的add / substract的容器有一个固定的高度并且是浮动的，你可以试试这样的东西 .

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

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

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

    回复于
  • 0

    在_1872653中获得的解决方案：

    <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>
    回复于
  • 0

    IONIC 3：

    通常，这是因为你的 ion-item 具有正确的 height 但是 button 不要 button 因为它应该拉伸内部的图标 . 你可以看到我只留下左右边界的距离：'ve said now with the ispect function of chrome. So, to centered your icon you can try to remove it' s 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>
    回复于

相关问题