Angular Material如何垂直对齐md-button

Question

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

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

的菜单图标

由于

Answer 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

Answer 2

实际上材料会为您排列。它没有正确对齐的季节是因为你把图像放在div中。

当你移除它所在的双div时，它完全对齐。如果由于某种原因你需要保留这些div，只需将它们设置为与图片相同的高度。

我刚添加了这个：

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

看到问题。