如何在垫子设计中正确对齐我的 div答案

【问题标题】：How can I align correctly my div in mat design如何在垫子设计中正确对齐我的 div
【发布时间】：2019-06-17 13:00:53
【问题描述】：

我有这个组件列表，我想将它们对齐在同一行。我设法做到了，但它们没有正确垂直对齐。另外，我不知道我是否可以替换该行

.search-container > * {
    display: inline-block;
}

在 angularjs 中我使用的是 layout="row" 但它不再存在于 angular 4 中。

https://stackblitz.com/edit/angular-cteh6k

HTML

<div class="search-container" layout-align="space-between end">
    <div class="conditions">
        <mat-form-field>
            <mat-select #fontSize value="28px" placeholder="Select Search Field">
                <mat-option *ngFor="let index of [1,2,3,4,5]" value="opt{{index}}">opt{{index}}</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
            <button mat-button aria-label="Clear" *ngIf="value" matSuffix mat-icon-button (click)="value=''">
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>      


    </div>
    <div class="buttons-container">
        <div class="condition-button clickable-elem">
                <mat-icon svgIcon="minus-circle-outline">asd</mat-icon>
        </div>
        <div class="condition-button clickable-elem">
                <mat-icon svgIcon="plus-circle-outline">asd</mat-icon>
        </div>
    </div>
    <div class="buttons-container">
        <button class="md-raised btn-submit" mat-button>FILTER</button>
    </div>
</div>

CSS

.search-container > * {
    display: inline-block;
}

.search-container {
font-size: 0.7rem;

}
md-input-container .md-errors-spacer{
min-height: 0 !important;
}


.buttons {
  margin-left: 5px;

}
.condition-button {
  display: inline-block;

}
svg {
  width: 30px;
  cursor: pointer;

}     
.conditions{
  max-height: 170px;
  padding-right: 10px;
  padding-top: 10px;
  overflow-y: auto;   
}

【问题讨论】：

标签： html css angular

【解决方案1】：

使用以下样式

.search-container {
  font-size: 0.7rem;
  display: flex;
  align-items: flex-end;
}

P.S.：如果您希望它居中对齐，请使用“align-items: center;”

也删除此样式

search-container > * {
    display: inline-block;
}

查看更新示例enter link description here

【讨论】：

【解决方案2】：

添加这个 CSS

.buttons-container, .conditions {
    vertical-align: middle;
}

【讨论】：