将图像旁边的文本框的顶行垂直居中的灵活方式

Question

似乎很容易，但我无法弄清楚正确的 css 平衡。

我想要的是这个结果（橙色块是图像）：

这很容易，如果图像具有固定高度和文本固定属性（行高等），但我需要它来工作，即使我将它插入我网站上的不同位置，它也需要自动调整到图像和文本属性。 因此，如果图像变大，或者文本具有不同的大小/行高，它仍然有效。 我可能会省略文本变化，但不同大小的图像需要工作。

到目前为止，我只有display: flex和align-items: center ，但这仅适用于一行，一旦换行，它将使整个文本块居中，这是错误的。 必须有一些css技巧来实现这一点，对吧？

编辑：经过另一次试验，我设法想出了更好的东西，但仍然需要控制文本（文本的最高值必须是：行高/-2）

 .txticon {max-width: 250px; display: block; margin-bottom: 15px; display: flex;} .txticon::after {content: ""; clear: both; display: table;} .txticon img {float: left; margin-right: 10px;} .txticon span {line-height: 20px; top: -10px; position: relative; overflow: hidden; transform: translateY(50%);}

 <a class="txticon" href="#"> <img class="icon" src="https://via.placeholder.com/100x100" alt=""> <span>One line text</span> </a> <a class="txticon" href="#"> <img class="icon" src="https://via.placeholder.com/100x100" alt=""> <span>Multiple line text which is really really really long</span> </a>

Answer 1

<div class="row">
  <img />
  <p>Text</p>
</div>

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

这可能会奏效。

Answer 2

文本块上的margin-top会起作用吗？

<div class="row">
  <img />
  <p class="text">Text</p>
</div>

.row {
  display: flex;
  align-items: flex-start;
}
.text {
  margin-top: 10px; // replace with half of the image height
}