html - 垂直对齐图像旁边的多行文本？

Question

我在 stackoverflow 中找到了这个示例，它适用于单行文本。

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

<div>
  <img class="align-middle" src="/image/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="/image/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>

请告诉我我做错了什么？

Answer 1

假设每个单独的文本元素(在您的例子中为 <span> s)不会超过一行，只需将它们包装在另一个元素中(在我的示例中为 .text-group)并应用 vertical-align: middle到那个。

您还需要设置 display: block到 <span>元素，如果有多个(或将它们替换为默认显示为 block 的其他元素，例如 <p> )。

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

.text-group {
  display: inline-block;
}

span {
  display: block;
}

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

但是，如果其中任何一个 <span>接管不止一条线，那么这种方法将不起作用，如下所示:

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

.text-group {
  display: inline-block;
}

span {
  display: block;
}

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

正如@KhoiNgoNguyen 所指出的，您可以设置 width到 .text-group所以，连同图像，他们总结了100%或更少。然而，由于多种原因，这是一个非常糟糕的方法:

• 您还需要设置 width确保它不会占用更多空间。
• 如果您在多个地方使用此布局但使用不同的图像，则必须手动设置 width所有事件。
• 如果您有更多列怎么办？您将不得不调整 width对于他们所有人。

如果支持没问题，Flexbox是最好的选择:

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

<div class="parent">
  <img src="/image/ymxaR.png">
  
  <div>
    <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! (3) I'm in the middle of the image! thanks to CSS! hooray!</p>
  </div>
</div>

现在即使文本部分比图像长，它也会按预期显示:

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

<div class="parent">
  <img src="/image/ymxaR.png">
  
  <div>
    <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! (3) I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(4)I'm in the middle of the image! thanks to CSS! hooray! (5) I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(6)I'm in the middle of the image! thanks to CSS! hooray! (7) I'm in the middle of the image! thanks to CSS! hooray!</p>
  </div>
</div>

您甚至可以添加多个列而无需额外的代码!

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

<div class="parent">
  <img src="/image/ymxaR.png">
  
  <div>
    <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! (3) I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(4)I'm in the middle of the image! thanks to CSS! hooray! (5) I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(6)I'm in the middle of the image! thanks to CSS! hooray! (7) I'm in the middle of the image! thanks to CSS! hooray!</p>
  </div>
  
  <div>
    <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! (3) I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(4)I'm in the middle of the image! thanks to CSS! hooray! (5) I'm in the middle of the image! thanks to CSS! hooray!</p>
    <p>(6)I'm in the middle of the image! thanks to CSS! hooray! (7) I'm in the middle of the image! thanks to CSS! hooray!</p>
  </div>
</div>