图片在段落中对齐主要用css的vertical-align（如middle实现图文垂直居中）、float（如left/right实现文字环绕）或display: inline-flex/flex布局；html的align属性已废弃，不推荐使用。
图片在段落中对齐，主要靠 CSS 的 vertical-align 和 float 属性，或现代布局如 display: inline-flex。HTML 的 align 属性（如 <img align="middle">）已废弃，**不推荐使用**。
让图片与文字垂直居中对齐
适用于图片和文字在同一行、希望图片上下居中显示的场景（比如小图标+文字）：
说明：默认 <img> 是 inline 元素，可直接用 vertical-align 调整相对基线的位置。
- 加
style="vertical-align: middle;"最常用，视觉上最协调 - 其他值：
top、bottom、text-top、text-bottom
示例代码：
<p>这是一个@@##@@带图标的段落。</p>
让图片左/右浮动，文字环绕
适合图文混排，如新闻、博客中图片靠左/右，文字自动绕排：
- 用
float: left;或float: right; - 建议同时设置
margin避免贴边（如margin-right: 8px;） - 注意：浮动元素会脱离文档流，后续内容可能错位，必要时加
clear: both;
示例代码：
<p>@@##@@这是一段围绕图片的文字内容……</p>
用 Flex 布局精准控制图文关系
如果需要更灵活的对齐（比如图片居左、文字居右，或整体居中），推荐用 display: flex：
- 给包裹容器（如
<div> 或 <code><p></p>）设display: flex; - 用
align-items: center;实现垂直居中 - 用
justify-content: space-between;或flex-start控制水平位置
示例代码：
<p style="display: flex; align-items: center; gap: 8px;"> @@##@@ <span>公司简介文字在这里</span> </p>
补充提醒
注意点：
- 不要用过时的
align属性（如<img src="icon.png" alt="图标" style="max-width:90%" style="max-width:90%" style="max-width:90%">），浏览器兼容性差且不符合标准 - 图片加
alt属性是必须的，利于可访问性和 SEO - 响应式设计中，建议配合
max-width: 100%; height: auto;防止图片溢出容器
