如何在中心顯示標題？

Question

這是我的代碼的輸出：

我想讓「歡迎來到本網站」顯示在頁面的中心，我該怎麼做？

這是app.component.html這裏我haved代碼{{title}}的模板，這將在頁面頂部顯示。

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

這是我加入這裏

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

標題名稱標題必須在所有標籤是沒有幫助我的頁面顯示中心的TS文件。有沒有另一種方法來做到這一點？

Answer 1

你只需要使用align:center; CSS爲您<h4>標籤具有title值：

h4 { 
    text-align: center; 
}