How to display the title in the center? - css

Question

This is the output of my code:
I want the "welcome to the site" to be displayed at center of the page, how do i do this?
This is the code of app.component.html here I haved {{title}} templated which will be displayed at the top of the page.
<h4>{{title}}</h4>
<div class="col-sm-10">
<button type="button" class="btn btn-default" (click)="createEmp()">Create Employee</button>
</div>
<div style="margin-top: 60px;">
<div class = "container">
<div *ngIf="add">
<h2>Add Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" minlength="4" [(ngModel)]="model.name" placeholder="Enter Your Name" #name="ngModel" required/>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="position">Position:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="position" [(ngModel)]="model.position" placeholder="Enter your position" required />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="salary">Salary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" [(ngModel)]="model.salary" placeholder="Enter Salary" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" (click)="addEmployee()" [disabled]="empForm.invalid">Add Employee</button>
</div>
</div>
</form>
</div>
<div *ngIf="edit">
<h2>Update Employee:</h2>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name"
name="name" [(ngModel)]="model2.name" placeholder="Enter Your Name" #name="ngModel" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="position">Position:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="position" name="position" [(ngModel)]="model2.position" placeholder="Enter your position" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="salary">Salary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salary" name="salary" [(ngModel)]="model2.salary" placeholder="Enter Salary" required/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" (click)="updateEmployee()">update Employee</button>
</div>
</div>
</form>
</div>
<div *ngIf="Show">
<h2>Employee Details</h2>
<table class="table table-bordered">
<thead>
<tr>
<th width=400>Name</th>
<th width=400>Position</th>
<th width=200>Salary</th>
<th width=400>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees; let i=index">
<td>{{employee.name}}</td>
<td>{{employee.position}}</td>
<td>{{employee.salary}}</td>
<td>
<a class="btn btn-success" (click)="editEmployee(i)">Edit</a>
<a class="btn btn-danger" (click)="deleteEmployee(i)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
this is the ts file where i added title name here
import {Component, OnInit} from '#angular/core';
import { FormControl, FormGroup , Validators} from '#angular/forms';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
model:any={};
model2:any={};
edit= false;
add=false;
create=true;
Show=false;
myValue;
ngOnInit(){
this.model = new FormGroup({
'name': new FormControl(this.model.name, [
Validators.required,
Validators.minLength(4),
]),
'position': new FormControl(this.model.position),
'salary': new FormControl(this.model.salary, Validators.required)
});
}
title = 'Welcome to the Site';
employees = [{name :"Sunil", position : "Developer", salary : 20000},
{name :"Vamshi", position : "Java Developer", salary : 30000},
{name : "Chethan", position : ".Net Developer", salary : 10000}];
createEmp(){
this.add=true;
this.create=false;
this.Show=false;
this.edit=false;
}
addEmployee()
{
console.log()
this.employees.push(this.model);
this.Show = true;
this.add=false;
this.model = {};
}
deleteEmployee(i){
this.employees.splice(i,1)
this.Show=true;
console.log(i);
}
editEmployee(k){
this.edit = true;
this.Show=false;
this.add=false;
this.model2.name = this.employees[k].name;
this.model2.position = this.employees[k].position;
this.model2.salary = this.employees[k].salary;
this.myValue = k;
}
updateEmployee(){
this.Show=true;
this.edit = false;
let k = this.myValue;
for(let i=0;i<this.employees.length;i++){
if(i==k)
{
this.employees[i]= this.model2;
this.model2 = {};
}
}
}
}
The title must be displayed center at all of the pages tag is not helping for me. Is there another way to do this?

Answer 1

You just need to use the align:center; css for your <h4> tag that has the title value:
h4 {
text-align: center;
}