угловой материал: не может центрировать md-checkbox внутри div

Question

Моя задача - установить md-checkbox внутри div с flex.

Я смотрел сайт углового материала, но все еще не могу исправить это.

<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 s имеют закрывающие теги в правильном месте. Также удалите нижний край md-checkbox, чтобы все было хорошо выстроено.

Markup

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