这是我的代码的输出:
我希望“欢迎访问网站”显示在页面的中心,我该怎么做?
这是app.component.html的代码,我已经{{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>
这是我在这里添加标题名称的ts文件
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 = {};
}
}
}
}
标题必须显示在所有页面的中心,标签对我没用。还有另一种方法吗?
答案 0 :(得分:2)
您只需要使用align:center;
css作为<h4>
代码title
的代码:
h4 {
text-align: center;
}