造型角7材质图标行

Question

我在试着用7角质的材料。这个领域，特别是我与之斗争的领域是图标形式的领域。我想有一个图标，标签，然后无论是滑块或无线电按钮作为输入的字段。但我想不出如何让这3项在图标表单字段的正中排列，也无法让图标表单字段只占div水平宽度的50% (我想在同一行中有两个字段)。另外，如何决定何时在组件中使用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布局？看来你没有正确地使用它。

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

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

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

然后，您只需要垂直对齐项目(图标，标签，滑块)在您的div。您可以使用CSS完成此操作：

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

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