如何调整HTML代码实现图片左侧文本与图片垂直居中对齐

解决方案 #

你当前代码已经用到了flex布局的align-items: center属性，这个属性本身就是用来实现flex子元素垂直居中对齐的，没有生效大概率是冗余标签和样式缺失导致的，按如下调整即可：

调整点说明 #

• 移除flex容器内部末尾多余的<br/>标签，该标签作为flex直接子元素会干扰布局计算
• 给左侧文本的<span>标签添加flex: 1属性，让文本容器占据图片外的剩余宽度，避免文本被意外压缩
• 可选：如果仍有对齐问题，给flex容器显式添加min-height: fit-content，确保容器高度完全由内部最高的200px图片撑开

修改后的完整代码（已翻译中文内容） #

<hr>
<div style='display:flex;align-items:center;min-height: fit-content;'>
  <span style='flex: 1;'><b>设备与操作系统选择</b></span>
  <img style='height:200px;width:120px' src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg'/>
</div>
我们提供两类设备

原理说明 #

flex布局中align-items: center会让所有直接子元素在交叉轴（默认垂直方向）上居中对齐，修正冗余干扰项后即可生效。

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