Vertical align middle ion-buttons

Ionic Framework ionic-v3
1

Hi, 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>
  </ion-list>

Image result for the above code:
image

Thanks in advance,

John

2

Try this:

  <ion-list>
    <ion-item *ngFor="let product of this.productsCollection">
      <button ion-button icon-only clear outline item-right (click)="decreaseProduct()">
        <ion-icon name="remove-circle"></ion-icon>
      </button>
      <span item-right>{{this.quantityProducts}}</span>
      <button ion-button icon-only clear outline item-right (click)="increaseProduct()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-item>
  </ion-list>
1 Like
3

Hi pwespi, thanks for answer. I tried both item-left and item-right and doesnt’t worked. I noted that only the text inside the moved to right when I put item-right and to left when I put item-left. I did a post in stackoverflow and received a answer with a possible solution using pure css. I want to know only if I don’t need to code css to align this itens inside a ion-buttons element or this suggested solution one of the possible way to achieve the expected result.

Thanks, John

4 
>  <ion-item>
> 	<ion-icon (click)="method1()" name="name1"></ion-icon>
> 	<span style="vertical-align: 5%;">0</span>
> 	<ion-icon (click)="method2()" name="name2"></ion-icon>
> </ion-item>
1 Like
5

Hi Aaron, thanks for answer, but doesn’t worked. Did you tested with vertical-align with 5% value? I tested with 5% and 50% but unsuccessfully.

6

Works perfectly in Ionic Serve. Haven’t tested on a device. Are you sure you’re using the code exactly as provided?

7

Sorry, I don’t saw that you removed the buttons elements. I used the code exactly as you provided and the result looks like below. Its well aligned but its not styled. I tried apply the classes ion-button, icon-only, clear and outline to try get the expected result as I wrote in the question but unsuccessfully. I expect to use the material-design to get nice sytle. Not like the result obtained below.

image

8

Adding color=“primary” gives me the icon you have in your initial screenshot. It can’t be that hard to add more styles. That said, this works for me too. Maybe I don’t understand what you’re trying to accomplish? (Edit: I just realized this is very similar to the answer of @pwespi. Maybe you didn’t check his code either?)

<ion-item>
	<button ion-button item-left icon-only color="primary" (click)="" clear outline>
		<ion-icon name="remove-circle"></ion-icon>
	</button>
	<span style="vertical-align: 5%;" item-left>0</span>
	<button ion-button item-left icon-only color="primary" (click)="" clear outline>
		<ion-icon name="remove-circle"></ion-icon>
	</button>
</ion-item>
1 Like
9

Thanks Aaron. Looks nice now. I removed the ion-buttons tag of the code and looks better now.

image