I have a flex parent containing some buttons and a mat form field.
.toolbar { display: flex; justify-content: space-between; flex-direction: row; align-items: center;}<div class="toolbar"><button mat-mini-fab color="primary" aria-label="sidenab-button" class="icon"><mat-icon>menu</mat-icon></button><mat-form-field style="width: 30%" appearance="outline"><mat-label>Search</mat-label><input matInput><mat-icon matSuffix>search</mat-icon></mat-form-field></div>all elements inside toolbar are at the center, but only mat form field stay at the top of the element.
How could I fix it ? and why the element is not getting centered ?