Angular Material如何垂直对齐md按钮答案

【问题标题】：Angular Material how to vertical align md-buttonAngular Material如何垂直对齐md按钮
【发布时间】：2017-10-31 01:48:51
【问题描述】：

我是角度材料的新手。下面是我的简单代码。

<div layout="row" layout-margin>
    <md-button ng-click='toggleSideNav()'><md-icon md-svg-icon='menu'></md-icon></md-button>
    <div><div><img src='/Content/Images/logo.png' title='logo' alt='logo'></div></div> <!-- 138 * 66 image -->
</div>

谁能帮助我如何在左侧图像的中间垂直对齐菜单按钮？类似于左侧的菜单图标https://www.youtube.com/

谢谢

【问题讨论】：

标签： css angular-material

【解决方案1】：

很难从您的示例中猜测要求，但其中一种解决方案可能是：

HTML：

<div layout="row" layout-align="start center" layout-margin>
    <md-button class="md-raised" ng-click='toggleSideNav()'>Test</md-button>
    <div >
      <img src="/Content/Images/logo.png" title='logo' alt='logo'>
    </div> <!-- 138 * 66 image -->
</div>

CSS：

img {
  margin-left: -112px
}

这里是游乐场：https://codepen.io/anon/pen/NjZEzb

【讨论】：

并没有解决他们的问题，因为这很可能是因为 div 与图像高度不匹配，因此使其看起来对齐不正确。在您的操场上，删除部分“ layout-align="start center" ”实际上并没有改变任何东西......

【解决方案2】：

实际上，Material 会为您对齐。季节没有正确对齐是因为你把图片放在了div里。

当您删除它所在的双 div 时，它会完美对齐。如果出于某种原因您需要保留这些 div，只需将它们设置为与您的图片相同的高度即可。

我刚刚添加了这个：

 div{
  box-shadow: 0 0 0 1px;
}

查看问题。

【讨论】：

@投反对票的人，你能解释一下原因吗？我想知道我错过了什么/做错了什么。谢谢。