图片用text-align:center居中需作用于父容器而非img自身，正确做法是将img包裹在p或div中并设置父元素text-align:center；若img为block则仍有效，但推荐配合vertical-align:middle或display:block消除基线间隙。

图片用 text-align: center 居中失效怎么办

直接给 加 text-align: center 没用——这个 CSS 属性只对行内元素（或其父容器）生效，不是作用在 自身上的。真正起效的是把图片包在块级容器里，再对容器设置居中。

常见错误写法：
→ 完全无效

正确做法是：让图片的父元素（比如

或

）启用文本居中：

<p style="text-align:center">
  @@##@@
</p>

• 适用于单张图、图+文字混排、图在段落中间等场景
• 注意：如果图片设置了 display: block，它会独占一行，此时 text-align 仍有效（因为对父容器生效）
• 缺点：无法精确控制上下间距，容易和段落文字挤在一起

段落文字和图片一起水平居中，但保持换行关系

当一段文字里夹着一张图（比如“如图所示：”），又希望整句居中，关键在于别破坏文档流。不要给 加 display: block，否则它会脱离行内布局，导致文字断开。

推荐写法：

<p style="text-align:center">
  如图所示：@@##@@
</p>

• vertical-align: middle 让图片和文字基线对齐，避免图飘在文字上方或下沉
• 如果图太大导致行高撑开，可加 max-width: 100% 防溢出
• 不建议用 float 或绝对定位——会破坏段落结构，影响响应式

现代写法：用 flex 同时居中图片和段落块

当需要把整个段落（含图）作为独立模块居中（比如卡片式布局），flex 更可控。它不依赖文本流，能同时处理水平+垂直居中。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

<div style="display:flex; justify-content:center; align-items:center; flex-direction:column">
  <p>这是说明文字</p>
  @@##@@
</div>

• justify-content: center 控制主轴（默认横向）居中
• align-items: center 控制交叉轴（默认纵向）居中，让图和文字整体垂直居中
• 若只想水平居中、保持原有上下顺序，去掉 align-items 即可
• 注意兼容性：flex 在 IE10+ 支持良好，但 IE9 及以下需回退到 text-align 方案

图片居中后上下留白太小或太大

默认情况下， 是行内元素，浏览器会预留下行间距（为字母 g、j 等预留），导致图片下方有空白。这不是“没居中”，而是视觉错觉。

解决方法只有两个靠谱的：

• 给图片加 vertical-align: bottom 或 top，直接切掉基线间隙
• 或者统一设为 display: block，彻底脱离行内流（此时必须靠父容器 text-align 或 flex 居中）
• 慎用 margin 手动调——不同字号、不同字体下表现不一致，维护成本高

最稳的组合：父容器 text-align: center + 图片 vertical-align: middle + 必要时 max-width: 100%。

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