如何实现响应式布局让文本与图片并排显示或堆叠居中

在网页开发过程中，文本与图片的排版是高频需求，不同屏幕尺寸下需要展示不同的布局效果。小屏幕设备上文本和图片堆叠并居中能提升阅读体验，大屏幕设备并排展示可以充分利用屏幕空间，下面介绍具体的实现方案。

核心实现思路

实现文本与图片的响应式并排或堆叠居中，核心依赖两个CSS特性：一是flexbox弹性布局，用于快速控制元素的排列方向和对齐方式；二是媒体查询，用于根据屏幕尺寸切换不同的布局规则。整体逻辑是默认设置移动端优先的堆叠居中布局，当屏幕宽度达到指定阈值时，切换为并排布局。

基础HTML结构

首先定义包含文本和图片的容器结构，容器内部放置两个子元素，分别承载文本内容和图片内容：

<div class="responsive-wrap">
  <div class="text-content">
    <h3>示例文本内容</h3>
    <p>这是一段用于展示的示例文本，在实际开发中可以根据需求替换为任意内容，比如产品介绍、文章摘要等。</p>
  </div>
  <div class="img-content">
    <img src="https://picsum.photos/400/300?random=2" alt="示例图片">
  </div>
</div>

CSS样式配置

移动端默认样式（堆叠居中）

首先设置移动端优先的样式，容器使用flexbox布局，设置排列方向为垂直方向，子元素居中对齐，图片设置最大宽度避免溢出：

.responsive-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.text-content {
  max-width: 600px;
  text-align: center;
}

.img-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

桌面端适配样式（并排显示）

当屏幕宽度大于等于768px时，通过媒体查询修改容器的排列方向为水平方向，同时调整文本和图片的宽度占比，实现并排效果：

@media (min-width: 768px) {
  .responsive-wrap {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .text-content {
    flex: 1;
    max-width: 500px;
    text-align: left;
  }

  .img-content {
    flex: 1;
    max-width: 500px;
  }
}

关键属性说明

• flex-direction：控制flex子元素的排列方向，column为垂直堆叠，row为水平并排
• align-items：控制子元素在交叉轴上的对齐方式，center实现居中对齐
• justify-content：控制子元素在主轴上的对齐方式，center实现水平居中
• flex：子元素的伸缩属性，设置flex:1可以让元素平分剩余空间
• max-width:100%：图片的最大宽度不超过父容器，避免小屏幕下图片溢出

效果验证

完成上述代码配置后，可以调整浏览器窗口宽度观察效果：当窗口宽度小于768px时，文本和图片垂直堆叠，整体居中对齐；当窗口宽度大于等于768px时，文本和图片水平并排显示，左右两侧留有合适的间距，整体依然保持居中效果。如果需要调整切换的阈值，只需要修改媒体查询中的min-width数值即可。

响应式布局CSS_flexbox媒体查询文本图片排版修改时间：2026-07-11 03:27:09