Angular material 角度材质：垫复选框复选框的垂直对齐

我似乎无法覆盖默认设置，使复选框相对于复选框标签垂直对齐。搜索了一段时间，但没有任何效果。请参见示例图像：

应该是：

已尝试以下方法：

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

HTML:

Home类型
整个地方
有一个属于你自己的地方
私人房间
拥有自己的房间并共享一些公共空间
共享空间
像公共空间一样，呆在共享空间中

有一种与ng材料无关的快速解决方案

您可以将“mat复选框”放入“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>

整个地方
有一个属于你自己的地方


私人房间
拥有自己的房间并共享一些公共空间


共享空间
像公共空间一样，呆在共享空间中

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

---

我发现我必须调整上边距（本例中为2px）以使标签旁边的布局看起来正确。

与Craig的答案类似，但作为.mat-checkbox.mat-accent的后代，以避免使用“！important”

或者使用sass/less

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

---

我可以通过重置复选框容器使用的边距来实现这一点（我使用Angular/Material 7.x）

请注意，我必须应用一个附加的

translateY

，以说明框的边框宽度，并重置标签上的包裹，以便文本不会停留在一行上

您的.component.scss

---

我知道这很旧，但下面的内容对我来说很有用–老实说，我甚至不知道

auto

是如何处理垂直对齐的，但我想它是这样做的，它只把它放在两列中。我正在尝试移动复选框以与文本顶部对齐。是否必须将其添加到全局样式表中？我尝试将其粘贴到我的一个组件的样式表中，但没有成功，我希望避免将其变成全局样式。不幸的是，它似乎无法从角度框架组件中应用。因为类mat accent&mat复选框内部容器是在执行角度组件并应用其样式后由角度材质（from）生成的。我还需要在全球范围内使用一些material.scss来处理这些案例。谢谢，我就是这么想的。最后，我将其添加到一个全局sass表中，但将其包装在我自己的类中，以避免影响整个应用程序中其他复选框的样式。您有没有找到解决此问题的方法？没有，我还没有回来重新查看它。下面有几个建议的解决方案，我会在有时间的时候尝试。如果它们适用于您，请在下面进行评论。如果我将该样式添加到全局样式表中，Pat M下面的回答有效，但如果我将该类添加到组件的样式表中，则该答案无效。我猜Angular的视图封装会阻止组件的样式覆盖材质样式。希望这有帮助

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

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

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

: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
    }
  }
}