Question

我正在尝试模拟Angular Material中的联系人列表。包含文本的div应垂直对齐左侧头像图像的中心。我已经尝试了几种方法来添加layout-align，但它们似乎都没有任何效果。我已将下面的代码和Plunker网址包含在内，以演示我的问题。我感谢所有的帮助！

Plunker： https://plnkr.co/edit/W18pV9fOE6BP9SuYQGAm?p=preview

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>

Answer 1

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

Answer 2

由于md-list-item-text css类设置的边距，因此的原因是。可能有更好的方法，但建议与已建议的内容不同的内容，您可以覆盖这些样式并重置这些边距。

1）使用此方法重置style.css文件中的边距：

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

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

<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之后，以便您可以覆盖它。

Demo Plunker

无法在角度材质中垂直对齐文本与图像

2 个答案: