Html CSS中并排的垂直中对齐图像和文本

我试图用两个

div

s连续打印图像和文本

到目前为止，我获得了以下成果：

示例文本

<强>但我需要在图片后的中间显示文本，而不是在底部。

HTML

• 图像为

  二维码

  。所以我不能使用

  表
  方法

• 在

  foreach

  方法中使用的

  div

  。所以不能改变尺寸。我该怎么办

文本

或

文本出现在这里

或

---

将以下样式添加到文本div

height:3.8cm;
line-height:3.8cm;

---

你想要这样的东西吗：

示例文本

我的方法是：

通过使用flex：

示例文本

CSS:

---

这适用于我的项目，我有很多图像，不喜欢太多的div，代码更少：

<div class="test">
<img src="http://placehold.it/300x150"><span>sample text</span>
</div>

.test img {height:50px;width:auto;margin-bottom:-20px}

示例文本
.测试图像{高度：50px；宽度：自动；页边距底部：-20px}

---

垂直对齐：中间；不管用吗？下面是你的答案。谢谢但是，是否可以手动对齐文本位置？欢迎使用。你说的手动是什么意思？如果您认为这不是确切的期望输出，请投入一些时间编辑您的问题以满足期望输出，并让人们编辑或添加新答案

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

height:3.8cm;
line-height:3.8cm;

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

<div class="test">
<img src="http://placehold.it/300x150"><span>sample text</span>
</div>

.test img {height:50px;width:auto;margin-bottom:-20px}