How to display the title in the center?

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