Question

我的任务是将一个md-checkbox设置在一个带有flex的div内。

我查看了有角度的材料网站，但仍然无法做到正确。

<div class="main blue" layout="row" layout-align="start center">
   <div class="container yellow" layout="row" layout-align="center center" flex="30">
      <md-checkbox class="check"></md-checkbox>
</div>
<div layout="row" layout-align="center center" flex="70">
      angular material
</div>

这是plnkr

它不是完美的中心。

是因为md-chexbox里面没有标签吗？

我错过了什么？

Answer 1

你去了 - CodePen

确保您的div在正确的位置有结束标记。另外，删除md-checkbox的下边距，让所有内容排成一行。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-padding>
  <div class="main blue" layout="row" layout-align="start center">
     <div class="container yellow" layout="row" layout-align="center center" flex="30">
        <md-checkbox class="check"></md-checkbox>
    </div>
    <div layout="row" layout-align="center center" flex="70">
          angular material
    </div>
  </div>
</div>

CSS

.check {
  margin-bottom: 0;
}

Answer 2

在容器div中尝试此CSS类：

.container-checkbox-align-mat-form-field{
  display:flex;
  flex-grow: 1;
  flex-shrink: 1;
  text-align: center;
  align-items: center;
}

angular-material：不能在div中居中md-checkbox

2 个答案: