html - 在 div 中水平放置文本图像

Question

我在 <li> 中有信息像这样:

<li>
  <h2>Une équipe locale </h2>
  <img src="https://picsum.photos/200" class="image-circle image-center">
  <p> Test Test Test </p>
</li>

我的代码显示了这一点

但我正在寻找这个结果:

我试了很多样式都没有这个结果!有人会有想法吗？

Answer 1

li {
  display: flex;
}
img {
  max-height: 250px;
  border-radius : 50%;
}

.wrapper-div {
  padding-left: 10px;
}

<ul>
  <li>
    <img src="https://picsum.photos/200" class="image-circle image-center">
    <div class="wrapper-div">
      <h2>Une équipe locale</h2>

      <p>
        Description like this
      </p>
    </div>
  </li>
</ul>