使用Flex布局实现图文同行时图片显示异常的问题求助

直接给你几个关键调整点，亲测有效：

• 给你的flex容器添加 align-items: center，这能让图片和文本在垂直方向居中对齐，只加text-align: center对flex布局没用；
• 给图片设置尺寸限制，比如 max-height: 1em（和文本行高匹配）或者 max-width: 20px，再配合 object-fit: contain 保证图片比例不失调；
• 可以用 gap: 8px 给图片和文本之间加个间距，避免挤在一起。

完整示例代码：

<body style="margin: 50px;">
  <div style="display: flex; align-items: center; gap: 8px;">
    <img src="你的图片地址" style="max-height: 1.2em; object-fit: contain;" alt="图标">
    <span>这是和图片同行的文本</span>
  </div>
</body>

如果你的图片本身尺寸过大，优先限制它的高度和文本行高一致，这样就能完美适配同行显示了。

内容的提问来源于stack exchange，提问作者Oguike Paschal