Элементы выше других Ionic 4

Question

Я работаю с Ionic 5, и у меня есть этикетка с текстом и чипом.И я хочу, чтобы этикетка с текстом на чипе располагалась по центру по вертикали.

Это мой HTML-код ...

<ion-card>

    <ion-item lines="none">

        <ion-label class="nombre-fecha ion-text-start" color="dark">
            <ion-text>
                <h3 class="nombre">Julia</h3>
                <p class="fecha">16 Sept, 2019</p>
            </ion-text>
        </ion-label>

        <div class="contenedor-monto">
            <ion-label class="monto ion-text-end" color="dark">$150</ion-label>
            <ion-chip color="rosa">
                <ion-label>Pasivo</ion-label>
            </ion-chip>
        </div>

    </ion-item>


</ion-card>

И это мой код SCSS ...

ion-card {
    width: 80%;
    background-color: white;
    border-radius: 6rem;
    height: 7rem;
}

.nombre {
    font-size: 2rem;
    font-weight: bold;
    color: black;
}

.fecha {
    line-height: 1rem;
    font-size: 1.3rem;
}

.contenedor-monto {
    display: flex;
}
.monto {
    font-size: 1.8rem;
    font-weight: bold;
}

ion-chip {
    height: 2.5rem;
}

Прямо сейчас я получил это ...

Но мне нужно это ...

Answer 1

Для вашего решения, которое вы начали, вам просто нужно задать flex-direction для столбцов.Вам нужно будет найти это, чтобы получить точный фрагмент, как правило, вам нужно несколько версий для всех распространенных совместимых браузеров.

Однако я бы использовал сетку с двумя строками, а затем настроил бы ее, чтобы удалить всенабивка пробирается в:

• https://ionicframework.com/docs/api/grid

Что-то вроде:

<div class="contenedor-monto">
  <ion-grid no-padding>
    <ion-row>
      <ion-col>
            <ion-label class="monto ion-text-end" color="dark">$150</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
         <ion-chip color="rosa">
            <ion-label>Pasivo</ion-label>
         </ion-chip>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>