Align text vertically between two buttons in Ionic 2

Question

I’m having trouble aligning the value vertically between two buttons. Follow the code snippet and the result:

<ion-list>

<ion-thumbnail item-start>
  <img src={{produto.foto}}>
</ion-thumbnail>
<h2>{{ produto.nomeProduto }}</h2>
<h3>{{ produto.nomeMedida }}</h3>
<p class="pValor"> {{ produto.valorProduto | currency:'BRL':true:'1.2-2' }} </p>

<div item-end >  
  <button ion-button round>
    <ion-icon name="remove"></ion-icon>
  </button>

    {{ produto.quantidadeProduto }}

  <button ion-button  round>
    <ion-icon name="add"></ion-icon>
  </button>
</div>

Answer 1

Thanks! I managed to solve with the code below.

<span  style="vertical-align: -26%;" item-left>{{ produto.quantidadeProduto }}</span>

Answer 2

Try placing your text inside a div with the following Ionic command

<div margin-top>
  {{ produto.quantidadeProduto }}
</div>

If it doesn’t work out or you have doubts about something, use the Ionic documentation, it is very complete!

Ionic: CSS Ionic Documentation