I am currently working on the front page layout which you can see in the following link: https://i.sstatic.net/CBkFE.png.
My goal is to adjust the position of the create, update, and delete buttons so that they align perfectly with the middle point between "Project: [7] Example Project" and "7 items". However, despite creating a custom class called mybtn and using vertical-align:center property in the CSS code, I have not been able to achieve the desired effect. Any suggestions or tips would be greatly appreciated!
<div>
<div>
<h2>Project: [{{items.length}}] Example Project</h2>
<p>{{items.length}} items
<button (click)='onDelete()' type="button" class="btn float-right btn-space mybtn">delete</button>
<button (click)='onUpdate()' type="button" class="btn float-right btn-space mybtn">update</button>
<button (click)='onCreate()' type="button" class="btn float-right btn-space mybtn">create</button>
</p>
</div>
<table class="table table-bordered table-striped margin">
<thead>
<tr>
<th>select</th>
<th>No.</th>
<th>Company</th>
<th>CCO No.</th>
<th>Budget Code</th>
<th>Description</th>
<th>Award Date</th>
<th>Sent Date</th>
<th>Cost Status</th>
<th>Committed Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td><input type="checkbox" (change)="checkbox(item, $event)" [(ngModel)]="item.flag"></td>
<td>{{item.No}}</td>
<td>{{item.Company}}</td>
<td>{{item.CCO_No}}</td>
<td>{{item.Budget_Code}}</td>
<td>{{item.Description}}</td>
<td>{{item.Award_Date}}</td>
<td>{{item.Sent_Date}}</td>
<td>{{item.Cost_Status}}</td>
<td>{{item.Committed_Amount}}</td>
</tr>
</tbody>
</table>
Here is the relevant snippet from the CSS file:
.btn-space {
margin-right: 5px;
margin-bottom: 10 cm;
margin-top: 10 cm;
}
.table td, .table th, .table input {
text-align: center;
}
.mybtn {
vertical-align:center;
}