如何将 Angular 材质复选框与 div 内的不同文本大小垂直对齐并将它们保持在 div 的中间答案

【问题标题】：How do i align the Angular materials checkboxes vertically with different text sizes inside div and keep them in middle of div如何将 Angular 材质复选框与 div 内的不同文本大小垂直对齐并将它们保持在 div 的中间
【发布时间】：2020-07-23 05:47:28
【问题描述】：

这里是 stackbliz 展示的问题： https://stackblitz.com/edit/angular-addm8z-rng1eb?file=app/checkbox-overview-example.css

Image of the Issue
Expectation

【问题讨论】：

只要去掉 text-align:center; CSS 规则？
我的用例是将它们保持在中心并如前所述对齐，更新了 stackbliz，我的用例与 @Borad Akash 建议，但正如您在 stackbliz 中看到的那样面临滚动问题
当你设置了高度和溢出时，就会显示滚动，这就是css的行为。

标签： css angular sass flexbox angular-material

【解决方案1】：

您需要将宽度设置为cb-wrapper。

即

    .cb-wrapper
    {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100px;
    margin: auto;
    }

【讨论】：

尝试了我的场景，面临滚动条出现在内容旁边的屏幕中间而不是像正常情况下最左边的问题