如何垂直对齐角度材料行中的子项

Question

html使用布局指令（layout =＆＃34; row＆＃34;）构建，并包含一个图标和3个选择框。我的选择框和图标未对齐 - 我如何水平对齐？

我的代码

<div layout="row" layout-align="start center" class="filter"> 
        <div flex="15">
            <i class="material-icons md-24">filter_list</i>Filter
        </div>
        <div>
            <md-select ng-model="$ctrl.selectedtype1" placeholder="type1" class="md-no-underline">                    
                <md-option ng-repeat="type in $ctrl.type1List" ng-value="type">
                    {{type.value}} ({{type.id}})
                </md-option>
            </md-select>
        </div>
        <div>
            <md-select ng-model="$ctrl.selectedtype2" placeholder="type2" class="md-no-underline">                    
                <md-option ng-repeat="type in $ctrl.type2List" ng-value="type">
                    {{type.value}} ({{type.id}})
                </md-option>
            </md-select>
        </div>
        <div>
            <md-select ng-model="$ctrl.selectedtype3" placeholder="type3" class="md-no-underline">                    
                <md-option ng-repeat="type in $ctrl.type3List" ng-value="type">
                    {{type.value}} ({{type.id}})
                </md-option>
            </md-select>
        </div>
    </div>

......看起来像这样：

Answer 1

https://plnkr.co/edit/I8Jn4JweN0OVGBzBAwS8?p=preview

material-design-iconic-font css provides many icons. Try this plunkr: 

Answer 2

您实际上可以使用由角度材质提供的md-icon标签。

以下是相关链接：

1。https://material.angularjs.org/latest/api/directive/mdIcon

2。https://material.angularjs.org/latest/demo/icon

应在跨度

中的md-icon close和open标签之间添加过滤器