如何用CSS将图片定位在容器不同侧边并垂直居中？

你的核心问题在于用固定margin硬定位破坏了Flexbox的布局逻辑，同时HTML结构嵌套混乱，导致容器的对齐规则无法生效。下面是最优实现方案：

关键修复点 #

• 移除图片上的margin-left/margin-right等硬定位样式，改用Flexbox的原生属性控制元素分布
• 为每个需要左右布局的区块单独设置flex容器，确保图片和文字各自在独立的容器中
• 用align-items: center实现垂直居中，无需手动调整margin-top/margin-bottom

重构后的完整代码 #

HTML结构 #

<!-- 第一个区块：图片在左，文字在右 -->
<div class="section section-left">
  <img class="native" src="https://ychef.files.bbci.co.uk/1280x720/p0jx74zr.jpg">
  <div class="content">
    <h2 class="title">The US city reclaiming its Native roots</h2>
    <p class="desc">After superheading the modern fights of Native American rights, Minneapolis and nearby Saint Paul are experiencing an indigenous cultural renaissance.</p>
    <button class="more">See more</button>
  </div>
</div>

<!-- 第二个区块：文字在左，图片在右 -->
<div class="section section-right">
  <div class="content">
    <h2 class="title">What may lurk in alien oceans</h2>
    <p class="desc">As space agencies venture onto the moon of jupiter and Saturn to look deep below their frozen surface, we might find new forms of life there?</p>
  </div>
  <img class="venture" src="https://ychef.files.bbci.co.uk/1280x720/p07p8jpp.jpg">
</div>

CSS样式 #

/* 通用区块样式 */
.section {
  display: flex;
  align-items: center; /* 垂直居中容器内所有元素 */
  justify-content: space-between; /* 元素向两侧对齐，中间自动留白 */
  max-width: 1200px; /* 限制最大宽度，避免布局过宽 */
  margin: 60px auto; /* 水平居中，上下留间距 */
  gap: 30px; /* 图片与文字的固定间距 */
}

/* 文字区域自适应剩余空间 */
.section .content {
  flex: 1;
}

/* 图片通用样式 */
.native, .venture {
  width: 50%; /* 图片占容器一半宽度，可按需调整 */
  height: auto; /* 保持图片原始比例，避免变形 */
}

/* 文字样式优化 */
.title {
  font-size: 30px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin: 0 0 15px;
}

.desc {
  font-size: 14px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.6;
  margin: 0 0 30px;
}

/* 按钮样式 */
.more {
  background-color: white;
  border: 1px solid black;
  color: black;
  font-weight: bold;
  padding: 10px 20px;
  cursor: pointer;
}

核心逻辑说明 #

• display: flex：将区块转为flex容器，子元素自动横向排列
• align-items: center：一键实现容器内元素垂直居中，替代手动margin调整
• justify-content: space-between：让图片和文字分别靠向容器左右两侧，自动适配不同屏幕宽度
• flex: 1：让文字区域自动填充容器剩余空间，保证布局的自适应能力
• height: auto：避免固定图片高度导致的比例变形，提升页面兼容性

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