html图片水平对齐必须用css：单图独立成行用display:block+margin；图文混排用vertical-align；多图并排用flex；表格中图片对齐需在td设text-align和vertical-align。

HTML 中图片默认左对齐，想控制水平对齐必须用 CSS。`` 标签的 align 属性早已废弃，不能用；纯 HTML 标签（比如 <center></center>）也已被移除标准，靠不住。所有可靠方案都基于 CSS，按使用场景分三类处理。

单张图片独立成行，要居中或居右

这是最常见的情况，比如 banner、头像、文章配图：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 居中：给图片加 display: block; margin: 0 auto; —— 必须设为块级，否则 margin: auto 不生效
• 居右：同上，把 margin 改成 margin: 0 0 0 auto;
• 居左（默认）可不写样式，但若父容器有 text-align: center 等干扰，建议显式重置：margin-left: 0;

图片和文字混排时，控制图文相对位置

这时图片是行内元素，默认与文字基线对齐，常显得“上浮”。关键用 vertical-align：

• vertical-align: middle; 最常用，让图片中点对齐文字中线
• vertical-align: top; 或 bottom; 用于顶部/底部对齐单元格或行框
• 注意：vertical-align 只在行内上下文有效，对 flex 或 grid 子项无效

多张图片并排，或需配合其他元素对齐

比如图库、卡片列表、图标+文字按钮：

• 用 display: flex; 父容器 + justify-content: center;（居中）、flex-start;（左）、flex-end;（右）
• 避免用 float：它会脱离文档流，容易引发塌陷，且与 flex/grid 冲突
• 若需等宽分布或响应式换行，加 flex-wrap: wrap; 和 gap

表格中图片的水平对齐

虽然表格布局已不推荐用于整体页面，但若图片在 <td> 或 <code><th> 里： <ul><li>水平居中：给 <code><td> 加 <code>text-align: center;

不要写在 <img> 上——text-align 是父容器属性，子元素无法继承作用于自身

同时垂直居中：再加 vertical-align: middle; 到同一 <td> </td>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！