angular-material - Angular Material：复选框的mat-checkbox垂直对齐

Question

我似乎无法覆盖默认值以使复选框相对于复选框标签垂直对齐。搜索了一段时间，但没有任何效果。查看示例图片：

应该是这样的：

尝试了以下方法：

.mat-checkbox-inner-container {
    margin: none;
}

HTML：

<label><b>Home Type</b></label>
    <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>

标签： angular-material

Answer 1

类似于克雷格的答案，但作为 .mat-checkbox.mat-accent 的后代，无需使用“！important”

.mat-checkbox.mat-accent .mat-checkbox-inner-container {
    margin: 2px 8px auto 0;
}

或使用 sass/less

.mat-checkbox.mat-accent {
   .mat-checkbox-inner-container {
      margin: 2px 8px auto 0;
   }
}