本文详解如何通过 flexbox 布局将图片水平居中，并使标题与段落并排显示在图片右侧，解决常见浮动失效、内联无效及结构错位问题。
本文详解如何通过 flexbox 布局将图片水平居中，并使标题与段落并排显示在图片右侧，解决常见浮动失效、内联无效及结构错位问题。
要实现「图片居中、标题和段落位于其右侧」的视觉效果，关键在于统一容器 + 正确的 Flex 布局方向，而非将图文拆分为多个独立
。你当前的 HTML 结构将 ![如何使用 Flexbox 实现图片居中、文字内容右侧对齐的响应式布局]()
、
![如何使用 Flexbox 实现图片居中、文字内容右侧对齐的响应式布局]()
和
分散在三个互不相关的块级元素中，导致浏览器只能按文档流垂直堆叠——这正是“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;
">
@@##@@
<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 的核心优势在于以容器为单位协调子元素关系。脱离容器谈对齐，如同无锚行船——结构先行，样式后置。只要确保语义合理、嵌套正确，居中+并排布局即可简洁、健壮、可维护地实现。
