Winkelmaterial Layout-Align = "Center-Center" funktioniert nicht

Ich versuche, die Layout-Ausrichtung = "Center-Center", die den Inhalt in der Mitte sowohl vertikal als auch horizontal ausrichten sollte. Aber es richtet nur den Inhalt horizontal und nicht vertikal aus.Winkelmaterial Layout-Align = "Center-Center" funktioniert nicht

Hier ist die PLNKR link des Codes, den ich versuche.

<body ng-app="app" ng-controller="appCtrl"> 
<md-toolbar> 
<div class="md-toolbar-tools"> 
    <h2 flex>Hello Angular-material!</h2> 
</div> 
</md-toolbar> 
<div class="flexbox-parent"> 
    <div layout="row" layout-align="center center"> 
    <div flex="15">First line</div> 
    <div flex="15">Second line</div> 
    </div> 
</div> 
</body>

Quelle

2015-11-19 Prabhdeep

Vielleicht liegt es daran benutze flexbox ... ist vielleicht ein Kompatibilitätsproblem mit deinem Browser? Sie können einen Blick auf http://caniuse.com/ –

Ich verstehe es nicht, Sie wollen etwas wie [this] (http://imgur.com/aQ9DNu5)? – AndreaM16

Der Grund, warum es nicht vertikal zentriert ist, weil Ihr div das Layout-align-Attribut enthält, nicht eine Höhe haben.

Probieren Sie etwas wie

<div class="flexbox-parent"> 
    <div layout="row" layout-align="center center" style="min-height: 500px"> 
    <div flex="15">First line</div> 
    <div flex="15">Second line</div> 
    </div> 
</div>

Quelle

2015-11-19 22:18:33

Wie kann die Zentrierung im gesamten Ansichtsfenster des Browsers vorgenommen werden? –

@ Prabhdeep: Mein div mit Layout-Align hat eine minimale Höhe in px. Trotzdem funktioniert es nicht für mich. – Mak

Wenn Sie den Code oben in jsfiddle ausführen, funktioniert es gut, versuchen Sie sicherzustellen, dass Sie keine anderen Klassen oder Stile haben, die Ihre Elemente überschreiben. –

Flexbox vertikale Zentrierung funktioniert gut mit der Höhe der Definition für das übergeordnete Element:

<div class="flexbox-parent"> 
    <div layout="row" layout-align="center center" style="height: 100vh"> 
    <div flex="15">First line</div> 
    <div flex="15">Second line</div> 
    </div> 
</div>

Quelle

2017-05-06 06:08:37

Gerade

verwenden

fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"

auf Ihrer Eltern div

Quelle

2017-09-26 19:35:39 smedasn

Die Frage wurde mit Angular.js/angular-material 1.x in Verbindung gebracht. Angular 2+ Syntax, die Sie verwendet haben, könnte einige Leute verwirren. – Nerman

Winkelmaterial Layout-Align = "Center-Center" funktioniert nicht

Antwort

Verwandte Themen