Как я могу центрировать вход над div?

Question

У меня есть div в качестве контейнера и внутри input и других div с другими элементами. Я хочу центрировать input, который находится выше div, где должны отображаться сообщения об ошибках.

Сейчас они начинаются, как и ожидалось, в той же точке слева.

.con {
    display:flex;
    justify-content: space-between;
}

<div class="con">
            <!-- <span class="match-result__score">{{ match.home_team_final_points }} : {{ match.away_team_final_points }}</span> -->

            <div>
              <input placeholder="Home team score" class="home-team-input" type="number"
                  [(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points"
                  name="homeTeamPrediction" id="home-team" #homeTeamPredictionVal="ngModel" min="0" max="1000" required
                  pattern="^[1-1]?[0-9]$" />
                <div class="pr"
                  *ngIf="homeTeamPredictionVal.invalid && (homeTeamPredictionVal.dirty || homeTeamPredictionVal.touched)"
                  class="alert alert-danger absolute-home-team">
                  <div *ngIf="homeTeamPredictionVal.errors.required">This field is required.</div>
                  <div *ngIf="homeTeamPredictionVal.errors.pattern">The score prediction should be between 0-1000.</div>
                </div>
            </div>
               <div>
                <input placeholder="Away team score" class="away-team-input" type="number"
                [(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points"
                name="awayTeamPrediction" id="away-team" #awayTeamPredictionVal="ngModel" min="0" max="1000" required
                pattern="^[1-1]?[0-9]$" />
              <div
                *ngIf="awayTeamPredictionVal.invalid && (awayTeamPredictionVal.dirty || awayTeamPredictionVal.touched)"
                class="alert alert-danger absolute-away-team">
                <div *ngIf="awayTeamPredictionVal.errors.required">This field is required.</div>
                <div *ngIf="awayTeamPredictionVal.errors.pattern">The score prediction should be from 0 until 1000.
                </div>
              </div>
               </div>
          </div>

Answer 1

Вы можете просто добавить: text-align: center;, и если вы хотите, чтобы ваш ввод занимал все пространство: добавьте width: 100%, вот решение вашей проблемы: https://stackblitz.com/edit/angular-ct3fzx

CSS:

.input-container{
  text-align: center;  // to center the input in the div
}
.home-team-input{
  width: 100%; // to make the input's width 100%
  margin-top:5px; //to add some space
}
.away-team-input{
  width: 100%  // to make the input's width 100%
  margin-top:5px; //to add some space
}

HTML:

<div class="con">
            <!-- <span class="match-result__score">{{ match.home_team_final_points }} : {{ match.away_team_final_points }}</span> -->

            <div class="input-container">
              <input placeholder="Home team score" class="home-team-input" type="number"
                  [(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points"
                  name="homeTeamPrediction" id="home-team" #homeTeamPredictionVal="ngModel" min="0" max="1000" required
                  pattern="^[1-1]?[0-9]$" />
                <div class="pr"
                  *ngIf="homeTeamPredictionVal.invalid && (homeTeamPredictionVal.dirty || homeTeamPredictionVal.touched)"
                  class="alert alert-danger absolute-home-team">
                  <div *ngIf="homeTeamPredictionVal.errors.required">This field is required.</div>
                  <div *ngIf="homeTeamPredictionVal.errors.pattern">The score prediction should be between 0-1000.</div>
                </div>
            </div >
               <div class="input-container">
                <input placeholder="Away team score" class="away-team-input" type="number"
                [(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points"
                name="awayTeamPrediction" id="away-team" #awayTeamPredictionVal="ngModel" min="0" max="1000" required
                pattern="^[1-1]?[0-9]$" />
              <div
                *ngIf="awayTeamPredictionVal.invalid && (awayTeamPredictionVal.dirty || awayTeamPredictionVal.touched)"
                class="alert alert-danger absolute-away-team">
                <div *ngIf="awayTeamPredictionVal.errors.required">This field is required.</div>
                <div *ngIf="awayTeamPredictionVal.errors.pattern">The score prediction should be from 0 until 1000.
                </div>
              </div>
               </div>
          </div>