角材料：不能将div复选框居中div

Question

我的任务是使用flex将md-checkbox放在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

确保您的divs在正确的位置带有结束标记。另外，移除的底边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;
}