图片用text-align:center居中需作用于父容器而非img自身，正确做法是将img包裹在p或div中并设置父元素text-align:center；若img为block则仍有效，但推荐配合vertical-align:middle或display:block消除基线间隙。
图片用 text-align: center 居中失效怎么办
直接给 <img> 加 text-align: center 没用——这个 CSS 属性只对行内元素（或其父容器）生效，不是作用在 <img> 自身上的。真正起效的是把图片包在块级容器里，再对容器设置居中。
常见错误写法：<img src="a.jpg" style="text-align:center"> → 完全无效
正确做法是：让图片的父元素（比如 <p> 或 <div>）启用文本居中：
<p style="text-align:center"> <img src="a.jpg" alt="示例图"> </p>
- 适用于单张图、图+文字混排、图在段落中间等场景
- 注意：如果图片设置了
display: block，它会独占一行，此时text-align仍有效（因为对父容器生效） - 缺点：无法精确控制上下间距，容易和段落文字挤在一起
段落文字和图片一起水平居中，但保持换行关系
当一段文字里夹着一张图（比如“如图所示：<img>”），又希望整句居中，关键在于别破坏文档流。不要给 <img> 加 display: block，否则它会脱离行内布局，导致文字断开。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
<p style="text-align:center"> 如图所示：<img src="b.jpg" alt="流程图" style="vertical-align:middle"> </p>
-
vertical-align: middle让图片和文字基线对齐，避免图飘在文字上方或下沉 - 如果图太大导致行高撑开，可加
max-width: 100%防溢出 - 不建议用
float或绝对定位——会破坏段落结构，影响响应式
现代写法：用 flex 同时居中图片和段落块
当需要把整个段落（含图）作为独立模块居中（比如卡片式布局），flex 更可控。它不依赖文本流，能同时处理水平+垂直居中。
<div style="display:flex; justify-content:center; align-items:center; flex-direction:column"> <p>这是说明文字</p> <img src="c.jpg" alt="示意图"> </div>
-
justify-content: center控制主轴（默认横向）居中 -
align-items: center控制交叉轴（默认纵向）居中，让图和文字整体垂直居中 - 若只想水平居中、保持原有上下顺序，去掉
align-items即可 - 注意兼容性：
flex在 IE10+ 支持良好，但 IE9 及以下需回退到text-align方案
图片居中后上下留白太小或太大
默认情况下，<img> 是行内元素，浏览器会预留下行间距（为字母 g、j 等预留），导致图片下方有空白。这不是“没居中”，而是视觉错觉。
解决方法只有两个靠谱的：
- 给图片加
vertical-align: bottom或top，直接切掉基线间隙 - 或者统一设为
display: block，彻底脱离行内流（此时必须靠父容器text-align或flex居中） - 慎用
margin手动调——不同字号、不同字体下表现不一致，维护成本高
最稳的组合：父容器 text-align: center + 图片 vertical-align: middle + 必要时 max-width: 100%。
