Rendre verticalement le contenu ionique (ou le texte ou l'étiquette)

2020-06-30 html css angular ionic-framework ionic4

Je veux réaliser quelque chose comme ça:

entrez la description de l'image ici

Mais je suis actuellement à ce stade

entrez la description de l'image ici

Notez que la première image est sous forme de bootstrap, la deuxième image est ce que je conçois avec ionic [il y a des raisons pour lesquelles je ne veux pas faire glisser le bootstrap dans mon projet ionique, donc, évidemment, tout ne sera pas parfait à 100%, mais je veux me rapprocher de quelque chose]

Ma question est:

  1. Comment puis-je définir le nom de l'élément au centre vertical ? [voir 2ème image, j'ai déjà essayé de justify-content-center align-items-center ]
  2. Comment puis-je aligner le texte du nom de l' article sur Apple (comme la première image) [j'ai essayé class="ion-float-left" mais il semble que si je le donne ou non, dans la 2ème image, le nom de l'article reste le même, même si je mets toute ion-row (voir code) sous ion-list , Ça l'air horrible ]

Voici mon code ionique

product-list.page.html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Stock</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button (click)=onBackButtonPressed() color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list *ngIf="currentList">
              <ion-item *ngFor="let item of currentList" (click)="setIonList(item)">
                {{item}}
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answers

Je n'utilise pas ionique, mais normalement les gens font cela en CSS pour aligner verticalement du texte au centre:

{
    display: table-cell;
    vertical-align: middle;
}

ou

{
    line-height: 50px;  /* assuming the height of the element is 50px */
}

Vous pouvez également envisager la propriété 'padding-top', qui n'est pas tout à fait automatique comme ci-dessus.

2. Utilisez simplement margin-left, par exemple:

{ margin-left: 1vw; }

Related