造型 Angular 7 材质图标行

Question

我正在尝试设置 Angular 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 布局？看来您没有正确使用它。

看看 this 工作堆栈闪电战。我复制了主要的div 只是为了展示它们中的两个适合在同一行。

我清理了 Flex 布局的东西，你真正需要的是：

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

然后您只需要垂直对齐div 中的项目（图标、标签、滑块）。你可以用 CSS 做到这一点：

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

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