CODEWITHSUNDEEP
angularjsangular-material
Mohamed dev
Mohamed dev

Reputation: 172

angular-material: can't center md-checkbox inside div

My task is to center an md-checkbox inside a div with flex.

I looked in the angular material website but still can't make it right.

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

Here is a plnkr

It is not perfectly in the center.

Is it because the md-chexbox has no label inside it?

what am i missing?

Upvotes: 4

Views: 8541

Answers (2)

JLazar0
JLazar0

Reputation: 1292

try this css class in the container div:

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

Upvotes: 0

camden_kid
camden_kid

Reputation: 12813

Here you go - CodePen

Make sure that your divs have closing tags in the correct place. Also, remove the bottom margin of the md-checkbox to have everything nicely lined up.

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

Upvotes: 5

Related Questions