图文居中需用flex布局并配齐三要素：父容器设display: flex、justify-content: center和align-items: center，且需明确高度；text-align: center仅对行内内容有效，遇flex/grid/浮动/绝对定位即失效。

图片和文字同时居中，不是加个 text-align: center 就完事——它只管水平，且只对父容器生效；也不是随便套个 margin: 0 auto，因为图片默认是行内元素，不设 display: block 就不会响应。

为什么 text-align: center 经常失效

根本原因是：它作用对象是父容器，影响的是其内部的**行内内容**（如文字、<img>、<span></span>），但前提是这些子元素没被其他布局方式“接管”。

• 如果父容器用了 display: flex 或 display: grid，text-align 直接被忽略
• 如果图片被设了 float 或 position: absolute，它就脱离了文本流，text-align 对它无效
• 如果父容器里混着 <div> 这类块级子元素，它们默认靠左，<code>text-align 不影响它们——除非你给它们加 display: inline-block

  flex 布局实现图文并排+居中要配齐三要素

  这是目前最可控、最常用的方式，但漏掉任意一项都会导致错位或不居中。

  • 父容器必须设 display: flex —— 否则子元素不会变成 flex item
  • 必须同时写 justify-content: center（水平）和 align-items: center（垂直）——只写一个只能单向居中
  • 父容器要有明确高度（如 height: 200px 或 min-height: 100vh），否则 align-items: center 在垂直方向无参照，效果不可见

  示例结构：

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  .card { display: flex; justify-content: center; align-items: center; height: 240px; gap: 16px; }
  .card img { width: 80px; height: 80px; border-radius: 4px; }
  .card .text { font-size: 14px; }

  图片变形、文字溢出、间距不对？这些坑比代码还常见

  实际写的时候，真正卡住人的往往不是语法，而是细节行为没预判：

  • img 默认会随容器缩放，但若父容器宽度变化剧烈，又没设 max-width: 100% 或 object-fit: cover，图片可能拉伸或留白
  • 文字区域没设 flex: 1 或 flex-grow: 1，在窄屏下会被图片挤出容器，甚至换行破坏并排结构
  • gap 是推荐的间距控制方式，但 IE 不支持；如果需兼容旧版，得退回到 margin-right + :last-child 清除
  • 图片加载慢时，flex 容器可能先按 0 高度渲染，导致文字上移——可给 img 设固定 width/height 或用 aspect-ratio 预留空间

  别硬套方案：图文关系决定布局起点

  是“一张图 + 一段说明”？还是“多图多文横向平铺”？或是“图在左、文在右”的 profile 卡片？不同关系对应不同起点：

  • 单组图文并排居中 → 用 flex 最直接
  • 多组图文网格排列 → display: grid + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 更稳
  • 图文需要基线对齐（比如图标+小字标签）→ 回归 vertical-align: middle + inline-block，比 flex 更轻量

  真正麻烦的从来不是“怎么居中”，而是居中之后，图片会不会被压扁、文字会不会跑出边界、小屏下要不要重排——这些都得在写第一行 CSS 前就想好。