html – How to 'text-center' without include span tag-ThrowExceptions

Exception or error:

How to text-center without include span tag .
I want my text show in a middle but the text on the side don’t disturb it.

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

but on the start text size bigger , and display isn’t compatible it.

enter image description here

enter image description here

enter image description here

How to solve:

Just make the span 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>

or you could use an inline grid

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>

Leave a Reply

Your email address will not be published. Required fields are marked *