Vertical align middle ion-buttons Ionic 2 - css

Question

I'm developing a shopping cart page in Ionic 2 and I have the following code and I'm trying to align the buttons with the text vertically in the middle position. I tried with vertical-align: middle CSS but without success.
<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 result for the above code:
https://i.stack.imgur.com/yfeL6.png

Answer 1

It's hard to tell without the CSS surrounding your elements, but if the container for your add/substract has a fixed height and is floating, you can try something like this.
button,
span {
position: relative;
top: 50%;
float:left;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
From there you'll need to tweak your margins and such to make it look nice, but that should vertically align them just fine.
You can see a rough example here: JSFIDDLE

Answer 2

Solution obtained in 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:
Usually, this happened because your ion-item have the correct height but the button don't respect it 'cause it should stretch the icon inside.
You can see what I've said now with the ispect function of chrome.
So, to centered your icon you can try to remove it's padding and margin leaving only the distance from left and right border:
.my-left-icon {
margin: 0px 0px 0px 10px !important;
padding: 0 !important;
}
.my-right-icon {
margin: 0px 10px 0px 0px !important;
padding: 0 !important;
}
Then in your code apply the 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>