Layout materiale angolare-align = "centro" non funziona

Sto provando a usare il layout-align = "centro" che dovrebbe allineare il contenuto al centro sia verticalmente che orizzontalmente. Ma è solo l'allineamento del contenuto in orizzontale e non verticale.Layout materiale angolare-align = "centro" non funziona

Ecco il codice link del codice che sto provando.

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

fonte

2015-11-19 Prabhdeep

potrebbe essere perché usa flexbox ... forse è un problema di compatibilità con il tuo browser? potete dare un'occhiata a http://caniuse.com/ –

Non capisco, volete qualcosa come [questo] (http://imgur.com/aQ9DNu5)? – AndreaM16

Il motivo per cui non è centrandola in verticale è perché il vostro div che contiene l'attributo di layout-align non ha un'altezza.

provare qualcosa di simile

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

fonte

2015-11-19 22:18:33

Come si può eseguire il centraggio sull'intera vista del browser? –

@Prabhdeep: il mio div con layout-align ha un'altezza minima in px. Ancora non sta funzionando per me. – Mak

Se si esegue il codice sopra in jsfiddle funziona perfettamente, prova ad assicurarti di non avere altre classi o stili che annullano i tuoi elementi. –

Flexbox centratura verticale funziona bene con la definizione di altezza per l'elemento principale:

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

fonte

2017-05-06 06:08:37

Basta usare

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

sul tuo genitore div

fonte

2017-09-26 19:35:39 smedasn

La domanda era relativa a Angular.js/angular-material 1.x. La sintassi Angular 2+ che hai usato potrebbe confondere alcune persone. – Nerman

Layout materiale angolare-align = "centro" non funziona

risposta

Problemi correlati