无法将文本与角度材料中的图像垂直对齐答案

【问题标题】：Can't Vertical Align Text With Image In Angular Material无法将文本与角度材料中的图像垂直对齐
【发布时间】：2018-02-27 12:52:52
【问题描述】：

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

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>

【问题讨论】：

标签： angularjs angular-material

【解决方案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>

【讨论】：

支持你 ;)

【解决方案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

【讨论】：