Как «текст-центр» без тега span

Question

Как text-center без тега span. Я хочу, чтобы мой текст показывался посередине, но текст на стороне не мешал ему.

<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>

но размер начального текста больше, и дисплей не совместим с ним.

Answer 1

Просто сделайте промежуток 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>

или вы можете использовать встроенную сетку

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>