和

分散在三个互不相关的块级元素中，导致浏览器只能按文档流垂直堆叠——这正是“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 的核心优势在于以容器为单位协调子元素关系。脱离容器谈对齐，如同无锚行船——结构先行，样式后置。只要确保语义合理、嵌套正确，居中+并排布局即可简洁、健壮、可维护地实现。