html - 在图像旁边垂直对齐多行文字？

我在stackoverflow中找到了这个示例，它可以在单行文本中使用。

 .align-middle {
    vertical-align: middle;
  }
    .align-middle {
    vertical-align: middle;
  }

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
I need to add several lines of the text of in the div block. I try this doesn't work.


<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">(1)I'm in the middle of the image! thanks to CSS! hooray!</span>
  <span class="align-middle">(2)I'm in the middle of the image! thanks to CSS! hooray!</span>
  <span class="align-middle">(3)I'm in the middle of the image! thanks to CSS! hooray!</span>

</div>

请告诉我我做错了什么？

最佳答案

让我们尝试：

<style>
.align-middle {
   vertical-align: middle;
   display: inline-block;
 }
</style>

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">

  <span class="align-middle">
    <p>(1)I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(2)I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(3)I'm in the middle of the image! thanks to CSS! hooray!</p>
  </span>
</div>