In my HTML code, I have a div container with an input and another nested div element that contains various other elements. My goal is to center the input element in relation to the parent div, where error messages are displayed.
Currently, both elements start at the same point on the left side of the screen.
.con {
display:flex;
justify-content: space-between;
}
<div class="con">
<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>