样式化角度7材质图标行

Question

我正在尝试设置7号角材质的样式。 我要与之特别联系的领域是icon-form-field。 我想要一个图标，然后将标签或滑块或单选按钮作为该字段的输入。 但是我不知道如何使这3个项目在图标形式字段的垂直中心对齐，并且我也无法使图标形式字段仅占用图标宽度的水平宽度的50％ div（我想在同一行上有两个字段）。 另外，如何决定何时在组件中使用scss文件以及何时使用全局styles.scss文件？

这是我所拥有的屏幕截图：

这是html：

    <div layout="row" fxFlex>
       <div class="col-sm-2" flex="50" style="border: 1px solid">
         <h2>General</h2>
         <div class="icon-form-field" fxFlexRow style="border: 1px solid;">
             <mat-icon color="accent">reorder</mat-icon>
             <label class="slider-label" style="align-self: center">Sticky Header</label>
             <mat-slide-toggle
               [checked]="settings.stickyHeader"
               (change)="onStickyHeaderToggle($event)">
             </mat-slide-toggle>
         </div>
       </div>
     </div>

以及到目前为止我已经尝试过的CSS（这在component.scss中）：

.mat-icon {
  border: solid 1px black;
}

并在styles.scss中：

.slider-label {
  margin: 10px;
  margin-bottom: 20px;
  border: solid 1px black;
}

任何和所有的提示/想法表示赞赏！

谢谢.....

Answer 1

您正在使用哪个版本的Flex Layout？ 看来您没有正确使用它。

看看这个工作堆闪电战。 我复制主div只是为了展示其中两个适合同一行。

我整理了Flex Layout的内容，您真正需要的是：

<div fxLayout="row">
  <div fxFlex="50">
  </div>
</div>

然后，您只需要在div垂直对齐项目（图标，标签，滑块）即可。 您可以使用CSS执行此操作：

.vertical-align {
  vertical-align: middle;
}

并且仅适用于上述元素的类。