WordPress文章双图并排居中及响应式堆叠后居中问题求助

嘿，这个问题我之前帮朋友解决过！核心问题就是你原来的CSS在响应式断点处没重置图片的对齐样式，导致堆叠后还保持着左/右浮动的属性。给你一套靠谱的解决方案：

步骤1：调整HTML结构 #

先把两张图片放进一个自定义容器里，避免WordPress默认样式的干扰：

<div class="dual-image-container">
  <img src="你的左图URL" alt="左图描述" class="dual-image-item">
  <img src="你的右图URL" alt="右图描述" class="dual-image-item">
</div>

如果是用WordPress区块编辑器，你可以给「自定义HTML」区块里的容器加上dual-image-container类，或者给图片组区块直接添加自定义类名。

步骤2：添加自定义CSS #

把这段CSS加到你的主题自定义CSS里（外观→自定义→额外CSS）：

/* 桌面端：两张图并排，整体容器居中，左右图分别对齐 */
.dual-image-container {
  display: flex;
  justify-content: space-between; /* 实现左图左对齐、右图右对齐 */
  max-width: 1200px; /* 可根据你的页面宽度调整 */
  margin: 20px auto; /* 上下留白，整体水平居中 */
  gap: 15px; /* 两张图之间的间距，可选 */
}

.dual-image-item {
  max-width: 48%; /* 每张图占容器48%，留出间距 */
  height: auto; /* 保持图片比例 */
}

/* 响应式断点：屏幕小于768px时，堆叠图片并居中 */
@media (max-width: 768px) {
  .dual-image-container {
    flex-direction: column; /* 切换为垂直堆叠 */
    align-items: center; /* 让图片在容器中水平居中 */
  }
  
  .dual-image-item {
    max-width: 100%; /* 堆叠后图片占满容器宽度 */
    margin-bottom: 15px; /* 堆叠后图片的上下间距 */
  }
}

为什么这个方案有效？ #

• 用flex布局替代WordPress默认的float布局，更容易控制响应式行为
• 桌面端通过justify-content: space-between实现左右图分别对齐，容器margin:0 auto保证整体居中
• 移动端断点切换为垂直布局，align-items: center直接让图片居中，同时重置宽度确保适配手机屏幕

如果之前你给图片加了WordPress默认的alignleft/alignright类，记得把这些类去掉，或者在CSS里加上下面的代码强制清除浮动：

@media (max-width: 768px) {
  .alignleft, .alignright {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

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