<分区>
html - 我如何垂直居中图像和彼此相邻的 2 行文本？
大家好，我今天遇到了一个问题，我已经尝试修复了至少 2 个小时。基本上我想要的是左侧的图像，然后是与图像垂直对齐的 2 行文本(以响应方式)。
这里是我想要得到的图片:
我已经尝试了很多东西。
首先，我尝试使用 display: inline-block; 将图像和文本放在单独的 div 中，这使得文本和图像彼此相邻，但文本会在顶部。
我尝试向其中添加 flexbox，但这不起作用，因为 display: inline-block; 行将被覆盖。
我尝试将图像和文本放在同一个 div 中并使用 vertical-align: middle; 这也不起作用，因为只有第一行文本会与图像完美居中并且第二行将位于图像下方。
一段时间以来，我一直在 stackoverflow 上寻找解决方案，也在我通过 google 找到的其他网站上寻找解决方案，但我没有找到我需要的东西。
我的代码现在的 HTML:
<div class="projects">
<img src="../Photos/kugelround6.jpg" alt="kugel logo" class="pic projects-pic">
<span class="projects-text">Some text<br>Some more text</span>
</div>
CSS:
.projects{
}
.pic{
width: 200px;
height: 200px;
border-radius: 50%;
}
.projects-pic{
vertical-align: middle;
}
.projects-text{
vertical-align: middle;
}
如果我的英语、语法或代码不是最好的，我也很抱歉，我只是一个初级开发人员。
最佳答案
我建议你使用flexbox:
.projects{
display: flex;
align-items: center;
}<div class="projects">
<img src="https://picsum.photos/150" alt="kugel logo" class="pic projects-pic">
<span class="projects-text">Some text<br>Some more text</span>
</div>您需要媒体查询来提高响应能力。
关于html - 我如何垂直居中图像和彼此相邻的 2 行文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59718017/