Question

我在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>

请告诉我我做错了什么？

Answer 1

假设每个单独的文本元素（在您的情况下为<span>）不会占用多行，只需将它们包装在另一个元素中（在我的示例中为.text-group）并应用{{ 1}}到那一个。

如果有多个（{1}}元素，或者将其替换为默认显示为块的其他元素（例如vertical-align: middle，则还需要将display: block设置为<span>元素）。

<p>

.align-middle {
  vertical-align: middle;
}

.text-group {
  display: inline-block;
}

span {
  display: block;
}

但是，如果其中任何一个<div> <img class="align-middle" src="https://i.stack.imgur.com/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;
}

正如@KhoiNgoNguyen指出的那样，您可以将<div> <img class="align-middle" src="https://i.stack.imgur.com/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>设置为width，以便与图像一起使用.text-group或更少。然而，出于多种原因，这是一种非常糟糕的方法：

您还需要在图片上设置100%，以确保它不会占用更多空间。
如果您在多个地方使用此布局但图片不同，则必须在所有出现时手动设置width。
如果您有更多列，该怎么办？您必须为所有这些调整width。

如果支持不是问题，Flexbox是最佳选择：

width

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

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

<div class="parent">
  <img src="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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;
}

Answer 2

试试：

<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>

Answer 3

click on this Just Write this code (code you see in image) and you can solve your problem

and this is the result of that code

代码的CSS

<style>

    span {
          display: inline-block;
    }
    .align-middle {
      vertical-align: middle;
    }

</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>
            <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>

垂直对齐图像旁边的多行文字？

3 个答案: