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>

Answer 1

与Craig的答案类似，但作为.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;
   }
}

Answer 2

碰到同样的问题。我使用以下方法解决了这个问题（不幸的是需要可怕的！important）：

@IBAction func nextButton(_ sender: Any) {
ref?.child("Title").childByAutoId().setValue("titleTextField.text")

performNextTransitionSegue()

我发现我必须调整上边距（在这种情况下为2px），以使标签旁边的布局看起来正确。

Answer 3

我能够通过重置复选框容器使用的边距来实现此目的（我正在使用Angular / Material 7.x）。

请注意，我不得不应用一个额外的translateY来解决该框的边框宽度，并重置标签上的环绕，以使文本不会试图停留在一行上。

your.component.scss

:host {
  ::ng-deep {
    .mat-checkbox-inner-container {
      margin-top: initial;
      margin-bottom: initial;
      transform: translateY(2px); // value of checkbox border-width
    }
    .mat-checkbox-label {
      white-space: normal; // wrap label text
    }
  }
}

StackBlitz Fiddle

Answer 4

有一个与ng-material无关的快速解决方案

您可以将“ mat-checkbox”放入“ li”元素中，并通过设置像这样的列数来对齐“ ul”：

<ul style="columns:2">
    <li>
        <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    </li>
    <li>
        <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    </li>
    <li>
        <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>
    </li>
</ul>

Answer 5

我知道这很老了，但是下面对我有用：老实说，我什至不知道auto在垂直对齐中起作用，但我想它确实适用于alignment‍♂️：

  .mat-checkbox-inner-container {
      margin-top: 0;
  }