当div的layout-align =“center center”

Question

我已在此plunker中编写了代码。

md-toolbar和div代码部分如下：

<div layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <p><strong>ngClassifieds</strong></p>
            <md-button ng-click="openSidebar();">
                <md-icon class="mdi mdi-plus-circle"></md-icon>
                New classifieds
            </md-button>
            <md-button ng-init="showFilters = false" ng-click="showFilters = !showFilters">
                <md-icon class="mdi mdi-magnify"></md-icon>
                Filters
            </md-button>
        </div>
    </md-toolbar>
    <div layout-margin class="filters" style="background-color: grey" layout="row" layout-align="center center" ng-show="showFilters">
        <md-input-container>
            <label>Enter Search Term</label>
            <input type="text" ng-model="classifiedsFilter">
        </md-input-container>
        <md-input-container>
            <label>Categories</label>
            <md-select ng-model="categoryfilt">
                <md-option ng-repeat="cat in categories" ng-value="cat">
                    {{cat}}
                </md-option>
            </md-select>
        </md-input-container>
        <md-button md-no-ink style="font-weight: bold;" class="md-warn" ng-click="classifiedsFilter = ''; categoryfilt = ''; ">Clear</md-button>
    </div></div>

正如你在plunker中看到的那样，第一个div子（md-input-container）从它跳出来并被md-toolbar隐藏但是当我将div layout-align from "center center"更改为{{ 1}}一切都没事，但为什么会发生？我从教程中获取了这个代码示例，并且div layout-align值应该设置为layout-align="center"。其他的孩子与他们年长的顽皮兄弟没有相同的行为。

Answer 1

如果您查看CodePen中docs的第一个示例，您会看到layout-align=center center导致问题 - http://codepen.io/camden-kid/pen/yakXzX

layout-align=center的标记工作正常（正如您在问题中指出的那样） - CodePen

原因是第二个center水平对齐父div 中心的所有元素，但是，因为md-select的高度与input的高度不同，元素看起来不对齐。如果没有第二个center，则元素会在父div的顶部处对齐，这会使它们看起来对齐。