How to improve this layout?

ionic-v1
1

I want to put icons on the home screen.
But between the icon and the text there is a “space”.
I can not take.
If I remove the </ br> The text is next to the icon and I want to below the icon.

    <div class="card">
      <div class="item item-divider" align="center">
        Cat.
      </div>
      <div class="item item-text-wrap">
        <button class="button button-icon">
          <img class="imagemMenuInicial" src="img/addPedidos.png"></br>Text Loooooooong
        </button>
        <button class="button button-icon">
          <img class="imagemMenuInicial" src="img/addPedidos.png"></br>Text Short
        </button>
      </div>
    </div>

image

2

You could use the grid layout http://ionicframework.com/docs/components/#grid.

3

I did not like it … You apply’m not using “Row” and “Col”?

Sorry, Look this code:

<div class="row row-center">
        <div class="col">
          <a href="#/tab/pedidoAdd">
            <button class="button button-icon">
              <img class="imagemMenuInicial" src="img/addPedidos.png">
            </button>
          </a>
        </div>
</div>

I applied this example and the same problem occurs …

4

I solved the problem.
Removed the button and add the “a” tag.
Thanks to everyone who helped.

<div class="col"> <a class="textoMenu" href="#/tab/"> <img class="imagemMenuInicial" src="img/promocoes.png"> <p>Promoções</p> </a> </div>

PS .: Why the code here in the forum is not indented?

1 Like