Angularjs Can'；t垂直对齐角度材质中的文字与图像

我正在尝试用角材质模拟联系人列表。包含文本的div应与左侧化身图像的中心垂直对齐。我已经尝试了几种方法来添加布局对齐，但它们似乎都没有任何效果。我已经包括了下面的代码和Plunker URL来演示我的问题。我感谢所有的帮助

Plunker:

HTML

<md-list>
  <md-list-item class="md-2-line" layout="row" layout-align="center start">
    <img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
    <div class="md-list-item-text">
      <h3>Babe Ruth</h3>
      <p>Baseball Player</p>
    </div>
  </md-list-item>

  <md-list-item class="md-2-line" layout="row" layout-align="center start">
    <img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
    <div>
      <h3>Mickey Mantle</h3>
      <p>Baseball Player</p>
    </div>
  </md-list-item>

  <md-list-item class="md-2-line" layout="row" layout-align="center start">
    <img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
    <div class="md-list-item-text">
      <h3>Derek Jeter</h3>
      <p>Baseball Player</p>
    </div>
  </md-list-item>
</md-list>

贝比鲁斯
棒球运动员

米奇·曼托
棒球运动员

基特
棒球运动员

将

class=“md avatar”

添加到您的img标签中

差不多

<md-list-item class="md-2-line">
  <img class="md-avatar" src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
  <div class="md-list-item-text" layout="column">
    <h3>Derek Jeter</h3>
    <p>Baseball Player</p>
  </div>
</md-list-item>

基特
棒球运动员

它不整齐的原因是因为

md列表项文本设置了边距
css类。可能有更好的方法，但要提出与已经提出的不同的建议，您可以覆盖这些样式并重置这些边距

1） 使用此选项可从style.css文件中重置边距：

md-list-item .no-margin.md-list-item-text {
  margin: 0;
}

2） 在每个div上设置
no margin
class：

<md-list-item class="md-2-line" layout="row" layout-align="center start">
  <img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
  <div class="no-margin md-list-item-text">
    <h3>Babe Ruth</h3>
    <p>Baseball Player</p>
  </div>
</md-list-item>


贝比鲁斯
棒球运动员


3） 重新排列样式表导入以使其正常工作：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css" />



style.css
必须位于
angular material.min.css
之后，以便您可以覆盖它

支持你；）