看起來很簡單，但是我無法找到合適的css平衡。

我想要的，是這個結果(橙色塊是圖像):

如果圖像有固定的高度和文本固定的屬性(行高等),這很容易。)，但我需要這個來工作，即使我把它插入到我網站的不同地方，它也需要自動調整到圖像和文本屬性的大小。因此，如果圖像變大，或者文本有不同的大小/行高，它仍然工作。我可能會省略文本變化，但不同大小的圖像需要工作。

到目前為止，我只得到display:flex with align-items:center，但這只對一行有效，一旦它換行，它會使整個文本塊居中，這是錯誤的。一定有一些css技巧來實現這一點，對嗎？

編輯: 經過另一次嘗試，我想出了更好的方法，但是文本仍然需要控制(文本的上限值必須是:line-height / -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>

這可能有用。

文本塊上的頁邊距是否有效？

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