Ionic 4 - How can i fix this?

Ionic Framework
1

Hey there! I’m trying to do this header.

imagen
imagen.png856×517 88.5 KB

Edited: I manage to do it with rows, and cols, but now my text “Inicio” is not aligned with my icon. Those red lines are just borders for the cols and rows

imagen
imagen.png1440×2960 135 KB

The code:


    <ion-toolbar class="header-styling">

      <ion-row justify-content: space-between>
        
        <ion-col size="1">
          <ion-icon name="add" class="header-icon-top-left"></ion-icon>
        </ion-col>

        <ion-col size="10" class="align-text-middle">
          <ion-title>
            <object type="image/svg+xml" data="./assets/logochaniar.svg"></object>
          </ion-title>
        </ion-col>

        <ion-col size="1">
          <ion-icon name="home" class="header-icon-top-right" float-right></ion-icon>
        </ion-col>

      </ion-row>

      <ion-row justify-content: space-between>
       <ion-col size="6">
          <ion-icon name="folder" class="header-icon-bot-left"></ion-icon>
          <ion-text class="header-breadcrumb">Inicio</ion-text>
       </ion-col>

      <ion-col size="4"></ion-col>
      <ion-col size="2"></ion-col>    
      </ion-row>

    </ion-toolbar>

</ion-header>

Thanks in advance! :smiley:

2

Base on the doc: https://ionicframework.com/docs/api/row

<ion-row justify-content: space-between>
should change to
<ion-row justify-content-between>

And u should add align-items-center to vertically align items.
eg: <ion-row align-items-center justify-content-between>

1 Like