本文详解如何通过 flexbox 布局将图片水平居中，并使标题与段落并排显示在图片右侧，解决常见浮动失效、内联无效及结构错位问题。

本文详解如何通过 flexbox 布局将图片水平居中，并使标题与段落并排显示在图片右侧，解决常见浮动失效、内联无效及结构错位问题。

要实现「图片居中、标题和段落位于其右侧」的视觉效果，关键在于统一容器 + 正确的 Flex 布局方向，而非将图文拆分为多个独立

。你当前的 HTML 结构将 、

和

分散在三个互不相关的块级元素中，导致浏览器只能按文档流垂直堆叠——这正是“Ancient Rome 出现在图片下方”的根本原因。

✅ 正确做法是：

• 将图片、标题、段落全部包裹在一个父容器内；
• 对该容器启用 display: flex，并设置 align-items: center 实现垂直居中；
• 使用 justify-content: center 使整个 Flex 容器在页面中水平居中（可选）；
• 默认 flex-direction: row（即横向排列），自然让图文左右并置。

以下是优化后的完整代码示例：

简单的图片溢出的卡片式布局效果

简单的图片溢出的卡片式布局效果

下载

<div class="figure-wrapper" style="
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem; /* 推荐添加间距，提升可读性 */
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
">
  <img src="rome-colosseum.jpg" alt="Roman Colosseum"    style="max-width:90%"  style="max-width:90%">
  <div class="text-content">
    <h1>Ancient Rome</h1>
    <p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
  </div>
</div>

? 重要注意事项：

• ❌ 不要给 单独设 display: inline 或滥用 float —— 在 Flex 容器中这些属性会被忽略；
• ✅ 确保所有图文内容处于同一 Flex 容器下，否则 flex 规则无法跨容器生效；
• ⚠️ 若需响应式适配（如小屏幕时图文上下排列），可结合媒体查询修改 flex-direction：

  @media (max-width: 768px) {
    .figure-wrapper {
      flex-direction: column;
      text-align: center;
    }
  }

• ? 推荐为图文容器添加 gap 属性（而非 margin/padding）来控制图文间距，语义更清晰、兼容性良好（现代浏览器均支持）。

总结：Flexbox 的核心优势在于以容器为单位协调子元素关系。脱离容器谈对齐，如同无锚行船——结构先行，样式后置。只要确保语义合理、嵌套正确，居中+并排布局即可简洁、健壮、可维护地实现。