样式化角度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？看来您没有正确使用它。

  

看看   this   工作stackblitz。我复制了主要的C:\Anaconda\envs\deep_learning\lib\site-packages\ipykernel_launcher.py:4: RuntimeWarning: invalid value encountered in true_divide after removing the cwd from sys.path. 只是为了证明其中两个适合同一行。

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

div

然后，您只需要在<div fxLayout="row"> <div fxFlex="50"> </div> </div> 中垂直对齐项目（图标，标签，滑块）。您可以使用CSS做到这一点：

div

只需将类应用于上述元素。