如何在GitHub README.md中实现图片与文字同一行显示？

原写法失效原因 #

• Markdown 原生![alt](url)格式的图片渲染后默认是块级元素，会单独占满整行
• <h3>属于块级标题标签，默认自带换行规则，直接和图片拼接无法实现同行排版

可行实现方案 #

方案1：Flex 布局（推荐，对齐效果可控） #

用 div 容器包裹图片和标题，通过 flex 规则控制水平排列、垂直居中，适配 GitHub 渲染规则，代码如下：

<div style="display: flex; align-items: center; gap: 12px;">
  <img src="https://user-images.githubusercontent.com/84743905/174507937-c8637dd7-5a10-4c12-bf23-945c7872ace2.png" width="40" alt="技术栈图标" />
  <h3 style="margin: 0;">TECHNOLOGIES</h3>
</div>

参数调整说明：

• align-items: center 实现图片和文字的垂直居中对齐
• gap 控制图片和文字之间的间距，可根据需要修改数值
• 给 h3 加margin: 0是清除标题默认的外边距，避免出现对齐错位
• width 属性可自定义图片尺寸，匹配文字高度即可

方案2：内联对齐属性（轻量写法，适合简单场景） #

不需要额外包裹容器，直接给 img 标签加对齐属性，同时把 h3 转为内联块元素即可，代码如下：

<img align="absmiddle" src="https://user-images.githubusercontent.com/84743905/174507937-c8637dd7-5a10-4c12-bf23-945c7872ace2.png" width="40" alt="技术栈图标"> <h3 style="display: inline-block; margin: 0;">TECHNOLOGIES</h3>

注意事项 #

• 图文同行排版不要使用 Markdown 原生的![]()图片语法，它的块级渲染属性很难调整，直接写原生<img>标签可控性更高
• 如果出现上下错位，优先检查图片、标题标签的默认 margin/padding，手动设置为0即可修正

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