HTML样式布局调整求助：实现担保信息响应式居中排列

Hey there! Let's get your guarantee messages looking perfect on both desktop and mobile. Your current code is almost there—we just need to tweak the flexbox settings to handle responsiveness properly. Here's the revised code and breakdown:

修改后的完整代码 #

<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>

<style>
.guarantee-container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  justify-content: center; /* 所有项水平居中 */
  gap: 20px; /* 两个担保项之间的间距，替代旧的左右padding */
  margin-top: 25px;
}

.guarantee-item {
  display: flex;
  align-items: center; /* 图标与文字垂直居中对齐 */
  font-size: 13px;
}

.guarantee-item i {
  color: black;
  margin-right: 7px;
}

/* 可选：针对小屏幕的强化设置，确保内容完全居中 */
@media (max-width: 480px) {
  .guarantee-item {
    justify-content: center;
  }
}
</style>

<div class="guarantee-container">
  <div class="guarantee-item">
    <i class="fas fa-lock"></i> SSL secure payment
  </div>
  <div class="guarantee-item">
    <i class="fas fa-undo"></i> 100% money-back guarantee
  </div>
</div>

关键调整说明 #

• flex-wrap: wrap: 这是实现响应式换行的核心，当容器空间不够放下两个子项时，会自动将第二个项移到下一行
• justify-content: center: 确保无论一行还是两行，所有担保项都在容器内水平居中，完全匹配你想要的桌面/移动端效果
• gap 属性: 替代了你原来的左右padding，更简洁地控制两个子项之间的间距，避免了padding可能带来的布局冲突
• 子项垂直对齐: 给每个guarantee-item设置display: flex和align-items: center，让图标和文字始终保持垂直居中，视觉上更整齐
• 媒体查询（可选）: 针对小屏幕设置子项内部内容居中，进一步强化移动端的视觉体验

这样修改后，桌面端空间充足时两个担保项会在同一行居中显示，移动端空间不足时会自动换行成两行，每行内容也保持居中，完全符合你的需求。

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