css - 如何将输入置于 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>

标签： cssangular

Answer 1

你可以简单地添加 : text-align: center;，如果你想让你的输入占据所有空间 : add 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>