我在這方面花費的時間比任何人都多，在發布此之前，我在 Stack 上經歷了至少 30 個解決方案，因為我知道這是一個非常普遍的問題。所以我為自己發帖道歉，但我真的無法讓它發揮作用。
我的代碼如下：
<div style="width: 100%">
<div style="width: 70%; float: left;">
<mat-form-field appearance="standard" >
<mat-label>Filter Table Data</mat-label>
<input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
</mat-form-field>
</div>
<div style="width: 30%; float: right;">
<button
stye="display: flex; flex-direction: column; align-items: center;"
mat-raised-button (click)="clearFilter(1)" >
Clear Filter
</button>
</div>
</div>這是它在我的網站上的顯示方式：
關于如何讓它垂直對齊的任何想法？
最終結果目標：圖片中顯示的按鈕（“清除過濾器”）需要垂直對齊，目前顯示在div的頂部。
uj5u.com熱心網友回復：
最簡單的解決方案是將 flex 容器作為父容器。這使您可以輕松地對齊和證明其子級。
也不推薦使用 using float，因此我建議您使用flexboxorgrid代替float.
<div
style="
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div style="width: 70%">
<mat-form-field appearance="standard">
<mat-label>Filter Table Data</mat-label>
<input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
</mat-form-field>
</div>
<div style="width: 30%">
<button mat-raised-button (click)="clearFilter(1)">Clear Filter</button>
</div>
</div>
另一種可能更合適的解決方案是使用Angular Flex Layout. 您可以查看Angular Flex 布局檔案。
這是針對這種特殊情況的解決方案。
為了使用它，您需要匯入FlexLayoutModule并使其在整個應用程式中可用。
import { FlexLayoutModule } from '@angular/flex-layout';
設定完成后，您可以使用它來解決此問題：
<div style="width: 100%" fxLayoutAlign="space-between center">
<div style="width: 70%">
<mat-form-field appearance="standard">
<mat-label>Filter Table Data</mat-label>
<input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
</mat-form-field>
</div>
<div>
<button mat-raised-button (click)="clearFilter(1)">Clear Filter</button>
</div>
</div>
uj5u.com熱心網友回復：
<div style="width: 100%;display: flex;
align-items: center;
justify-content: center;">
<div style="width: 70%; float: left;">
<mat-form-field appearance="standard" >
<mat-label>Filter Table Data</mat-label>
<input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)" >
</mat-form-field>
</div>
<div style="width: 30%;float: right;display: flex;
align-items: center;
justify-content: center;">
<button
mat-raised-button (click)="clearFilter(1)" >
Clear Filter
</button>
</div>
</div>可能適合你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527468.html
下一篇：jquery改變樣式類屬性值