如何实现带描述文字的两张图片居中并排布局

问题描述 #

需要实现两张图片与各自描述文字并排布局（文字在图片右侧），且整体居中显示，但当前代码出现文字错位，第二段文字位于第一段下方而非右侧。

原代码存在的问题 #

1. id="docs"重复使用，HTML中id必须唯一，应改用class
2. 使用float布局未正确处理浮动影响，导致元素错位
3. 靠多个<br>强制换行，布局不稳定，无法实现两个卡片并排

修改后的解决方案 #

改用Flexbox布局实现稳定的并排效果，同时保证整体居中：

CSS 代码

/* 外层容器：实现两个卡片居中并排 */
.card-container {
  display: flex;
  justify-content: center;
  gap: 25px; /* 卡片间的间距 */
  margin-top: 30px;
}

/* 顶部主内容容器：居中显示 */
#sheets {
  width: 50%;
  margin: 0 auto;
  overflow: hidden; /* 清除内部浮动影响 */
}

/* 单个卡片：图片+文字横向排列 */
.doc-card {
  display: flex;
  align-items: flex-start; /* 图片与文字顶部对齐 */
  width: 320px; /* 固定卡片宽度，可按需调整 */
}

.doc-card img {
  margin-right: 15px;
  flex-shrink: 0; /* 防止图片被压缩变形 */
}

/* 图片基础样式 */
img {
  vertical-align: top;
}

HTML 代码

<div id="sheets">
  <a href="Spreadsheet.html"><img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Flag_of_the_Roman_Empire.png" height="200" width="350"></a>
  <h1>古罗马</h1>
  <p>古罗马是伟大的文明，与古希腊一同为现代世界贡献了诸多成果，比如建筑、数字、文字和政体。</p>
</div>

<!-- 包裹两个卡片的容器 -->
<div class="card-container">
  <div class="doc-card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Pantheon_Rom_1_cropped.jpg" height="125" width="125">
    <p>古罗马著名建筑之一。由于自7世纪以来一直被持续使用，它保存状况良好。万神殿拥有穹顶结构。</p>
  </div>
  <div class="doc-card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg" height="125" width="125">
    <p>另一座著名建筑。曾用于为大量人群提供娱乐。大多数人并未在角斗士比赛中丧生。斗兽场拥有大量拱门结构。</p>
  </div>
</div>

关键优化点 #

• 用flexbox替代float，布局更稳定且易于维护
• 将重复的id="docs"改为class="doc-card"，符合HTML规范
• 新增外层容器实现两个卡片的居中并排，避免依赖<br>的不稳定布局
• 每个卡片内部通过flex实现图片与文字的横向对齐，保证布局一致性

内容的提问来源于stack exchange，提问作者Nguyen Tran