Угловой макет-align = "center center" не работает

Я пытаюсь использовать layout-align = "center center", который должен выравнивать содержимое в центре как по вертикали, так и по горизонтали. Но это только выравнивание содержимого по горизонтали, а не по вертикали.Угловой макет-align = "center center" не работает

Вот код plnkr link кода, который я пытаюсь.

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

источник

2015-11-19 Prabhdeep

это может быть потому, что это использовать flexbox ... возможно, проблема совместимости с вашим браузером? вы можете взглянуть на http://caniuse.com/ –

Я не понимаю, вы хотите что-то вроде [этого] (http://imgur.com/aQ9DNu5)? – AndreaM16

Причина, почему она не центрирования его вертикально потому, что ваш DIV, содержащий атрибут макета выравнивания не имеют высоту.

Try что-то вроде

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

источник

2015-11-19 22:18:33

Как сделать центрирование на всем видовом экране браузера? –

@Prabhdeep: Мой div с компоновкой-выравниванием имеет минимальную высоту в px. Тем не менее это не работает для меня. – Mak

Если вы запустите код выше в jsfiddle, он работает отлично, попробуйте убедиться, что у вас нет других классов или стилей, которые переопределяют ваши элементы. –

Flexbox вертикального центрирования хорошо работает с определением высоты для родительского элемента:

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

источник

2017-05-06 06:08:37

Просто используйте

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

на вашем родительском DIV

источник

2017-09-26 19:35:39 smedasn

Вопрос был связан с Angular.js/angular-material 1.x. Синтаксис Angular 2+, который вы использовали, может смутить некоторых людей. – Nerman

Угловой макет-align = "center center" не работает

ответ

Смежные вопросы