Vertikal und horizontal mit Winkelmaterial ausrichten

Ich befolge die Dokumentation unter https://material.angularjs.org/latest/layout/alignment.Vertikal und horizontal mit Winkelmaterial ausrichten

Ich versuche, mein div vertikal und horizontal auszurichten, es funktioniert für die horizontale Ausrichtung, aber nicht für die vertikale. Quelle des Div ist unten:

<div layout="column" layout-align="center center" class="text-center"> 
    <md-content> 
    <h2>Test h2</h2> 
    </md-content> 
    <form ng-controller="LoginController as login" ng-submit="login.login()" 
    ng-cloak class="text-center"> 
    <md-content> 
     Login or ,<br/> 
     register test br 
     <md-input-container class="md-block"> 
     <label>Your email address</label> 
     <input ng-model="login.user.email" type="email" required> 
     </md-input-container> 
     <md-input-container class="md-block"> 
     <label>Your password</label> 
     <input ng-model="login.user.password" type="password" required> 
     </md-input-container> 
     <div class="md-block"> 
     <md-button type="submit" class="md-raised md-primary">Log in</md-button> 
     </div> 
    </md-content> 
    </form> 
</div>

Was ist das Problem hier? Danke für Ihre Hilfe

Quelle

2016-05-05 AndreyS

Plnkr: http://plnkr.co/edit/aCZFrBrY5xYvvFgThRvn?p=preview

einen Blick auf die wichtigsten divs Nehmen Sie nach layout="column" und Zeile. Sie sind wichtig.

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <!-- Angular Material style sheet --> 
    <link data-require="[email protected]" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" /> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" /> 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body ng-app="app" layout="column" flex> 
    <div flex layout="column" layout-align="center center" class="text-center"> 
    <div> 
     <md-content> 
     <div layout="row" layout-align="center center"> 
      <h2>Test h2</h2> 
     </div> 
     </md-content> 
     <form ng-controller="MainController as login" ng-submit="login.login()" ng-cloak class="text-center"> 
     <md-content> 
      <p>Some random text is here, login or register</p> 
      <div layout="row" layout-align="center start"> 
      <md-input-container class="md-block"> 
       <label style="text-align:center">Your email address</label> 
       <input ng-model="login.user.email" type="email" required> 
      </md-input-container> 
      </div> 
      <div layout="row" layout-align="center start"> 
      <md-input-container class="md-block"> 
       <label style="text-align:center">Your password</label> 
       <input ng-model="login.user.password" type="password" required> 
      </md-input-container> 
      </div> 
      <div layout="row" layout-align="center center"> 
      <div class="md-block"> 
       <md-button type="submit" class="md-raised md-primary">Log in</md-button> 
      </div> 
      </div> 
     </md-content> 
     </form> 
    </div> 
    </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
    <!-- Angular Material Library --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
    <script src="script.js"></script> 
</body> 
</html>

app.js

angular.module('app', ['ngMaterial']); 

angular.module('app').controller('MainController', ["$scope", function($scope) { 

}]);

Quelle

2016-05-05 16:34:19 salep

<div layout-align='center center' layout='column'>

Dies wird Zentrum nur unmittelbar untergeordnetes Element auszurichten. Umschließen Sie also alle Elemente, auf die Sie die horizontale und vertikale Achse ausrichten möchten

<div layout-align='center center' layout='column'> 
    <div>ABC</div> 
    <div>XYZ</div> 
</div>

Quelle

2016-05-05 16:58:53

Vertikal und horizontal mit Winkelmaterial ausrichten

Antwort

Verwandte Themen