el-avatar和文字对齐

在许多情况下，我们可以使用CSS的flexbox布局来实现avatar和文字对齐的效果。以下是一些例子：

1. 使用flexbox的align-items属性将avatar和文字垂直对齐：

<div class="container">
  <img src="avatar.png" alt="avatar">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.container {
  display: flex;
  align-items: center;
}

.container img {
  margin-right: 10px;
}

2. 使用flexbox的justify-content属性将文字水平居中对齐：

<div class="container">
  <img src="avatar.png" alt="avatar">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container img {
  margin-right: 10px;
}

3. 使用flexbox的flex属性将avatar和文字自适应宽度，并垂直对齐：

<div class="container">
  <img src="avatar.png" alt="avatar">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.container {
  display: flex;
  align-items: center;
}

.container img {
  flex: 0 0 auto;
  margin-right: 10px;
}

.container p {
  flex: 1 1 auto;
}

以上是一些常见的方法，但具体的实现方式还是要根据具体情况来决定。