Comment text-center sans inclure la balise span . Je veux que mon texte s'affiche au milieu mais le texte sur le côté ne le dérange pas.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="text-center">

  <br>
  <button class="btn-lg btn-danger col-10 " *ngIf="!login" (click)="isLogin()">Lets started</button>

<div *ngIf="login">

  <form (submit)="submit()">

    <input class="col-auto-2 text-center" type="number" title="Eggs" name="egg" placeholder="Enter amount" [(ngModel)]="protein.eggs"><span>size</span><br>
    <input class="col-auto-2 text-center" type="number" title="Breads" name="bread" placeholder="Enter amount" [(ngModel)]="protein.breads"><span>slices</span><br>
    <input class="col-auto-2 text-center" type="number" title="Tuna" name="tuna" placeholder="Enter amount" [(ngModel)]="protein.tuna"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Meat" name="meat" placeholder="Enter amount" [(ngModel)]="protein.meat"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cheese" name="cheese" placeholder="Enter amount" [(ngModel)]="protein.cheese"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cottage" name="cottage" placeholder="Enter amount" [(ngModel)]="protein.cottage"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Quinoa" name="quinoa" placeholder="Enter amount" [(ngModel)]="protein.quinoa"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Almonds" name="almonds" placeholder="Enter amount" [(ngModel)]="protein.almonds"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Powder" name="powder" placeholder="Enter amount" [(ngModel)]="protein.powder"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Gainer" name="gainer" placeholder="Enter amount" [(ngModel)]="protein.gainer"><span>gram</span><br>
    <input class="btn-secondary" type="button" value="Show" (click)="show()">
    <input class="btn-secondary" type="submit" value="Save">

  </form>

</div>

</div>

Mais au début, la taille du texte est plus grande et l'affichage n'est pas compatible.

enter image description here

enter image description here

enter image description here

0
Lichay Tiram 22 févr. 2020 à 18:11

1 réponse

Meilleure réponse

Faites simplement l'étendue position:absolute;

input + span {
  position:absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="text-center">

  <br>
  <button class="btn-lg btn-danger col-10 " *ngIf="!login" (click)="isLogin()">Lets started</button>

  <div class="center-block">

<div *ngIf="login">

  <form (submit)="submit()">

    <input class="col-auto-2 text-center" type="number" title="Eggs" name="egg" placeholder="Enter amount" [(ngModel)]="protein.eggs"><span>size</span><br>
    <input class="col-auto-2 text-center" type="number" title="Breads" name="bread" placeholder="Enter amount" [(ngModel)]="protein.breads"><span>slices</span><br>
    <input class="col-auto-2 text-center" type="number" title="Tuna" name="tuna" placeholder="Enter amount" [(ngModel)]="protein.tuna"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Meat" name="meat" placeholder="Enter amount" [(ngModel)]="protein.meat"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cheese" name="cheese" placeholder="Enter amount" [(ngModel)]="protein.cheese"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cottage" name="cottage" placeholder="Enter amount" [(ngModel)]="protein.cottage"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Quinoa" name="quinoa" placeholder="Enter amount" [(ngModel)]="protein.quinoa"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Almonds" name="almonds" placeholder="Enter amount" [(ngModel)]="protein.almonds"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Powder" name="powder" placeholder="Enter amount" [(ngModel)]="protein.powder"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Gainer" name="gainer" placeholder="Enter amount" [(ngModel)]="protein.gainer"><span>gram</span><br>
    <input class="btn-secondary" type="button" value="Show" (click)="show()">
    <input class="btn-secondary" type="submit" value="Save">

  </form>

</div>
  </div>

</div>

Ou vous pouvez utiliser une grille en ligne

form {
  display:inline-grid;
  grid-template-columns: auto auto auto;
}

span {
  text-align:left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="text-center">

  <br>
  <button class="btn-lg btn-danger col-10 " *ngIf="!login" (click)="isLogin()">Lets started</button>

  <div class="center-block">

<div *ngIf="login">

  <form (submit)="submit()">

    <input class="col-auto-2 text-center" type="number" title="Eggs" name="egg" placeholder="Enter amount" [(ngModel)]="protein.eggs"><span>size</span><br>
    <input class="col-auto-2 text-center" type="number" title="Breads" name="bread" placeholder="Enter amount" [(ngModel)]="protein.breads"><span>slices</span><br>
    <input class="col-auto-2 text-center" type="number" title="Tuna" name="tuna" placeholder="Enter amount" [(ngModel)]="protein.tuna"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Meat" name="meat" placeholder="Enter amount" [(ngModel)]="protein.meat"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cheese" name="cheese" placeholder="Enter amount" [(ngModel)]="protein.cheese"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cottage" name="cottage" placeholder="Enter amount" [(ngModel)]="protein.cottage"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Quinoa" name="quinoa" placeholder="Enter amount" [(ngModel)]="protein.quinoa"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Almonds" name="almonds" placeholder="Enter amount" [(ngModel)]="protein.almonds"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Powder" name="powder" placeholder="Enter amount" [(ngModel)]="protein.powder"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Gainer" name="gainer" placeholder="Enter amount" [(ngModel)]="protein.gainer"><span>gram</span><br>
    <div>
      <input class="btn-secondary" type="button" value="Show" (click)="show()">
      <input class="btn-secondary" type="submit" value="Save">
    </div>
  </form>

</div>
  </div>

</div>
1
Alohci 23 févr. 2020 à 03:31