如何用CSS实现图片与文字垂直对齐？Flex失效问题排查

你的代码里有两个核心问题导致预期效果没实现，下面逐个说明并给出修复方案：

1. 垂直对齐未生效的原因 #

container2虽然设置了display: flex，但Flex布局默认的垂直对齐方式是align-items: stretch（拉伸子元素填满容器高度），不会自动垂直居中。另外你在HTML里重复使用了content类（外层的三列容器和中间的文字容器都是这个类），会导致样式冲突，比如外层content的width:100vw会影响到内层的文字容器，这也是问题之一。

2. 图片占满页面空间的原因 #

图片没有设置宽度限制，默认会以原始尺寸撑满父容器，当图片本身尺寸很大时，就会超出布局范围。

修改后的代码： #

CSS部分

body {
  width: 100%;
  max-width: 960px;
  margin: 0 auto; /* 让body居中，避免和100vw的容器冲突 */
}

/* 重命名外层三列容器的类，避免和内层文字容器冲突 */
div.content-wrapper {
  width: 100vw;
  display: flex;
}

div.column1 {
  width: 15%;
  background-color: #F7F7F7;
  overflow: hidden;
  height: 100vh;
}

div.column2 {
  width: 70%;
  overflow: hidden;
  padding: 1rem; /* 给中间列加内边距，避免内容贴边 */
}

.banner {
  width: 100vw;
  height: 10vh;
}

.container2 {
  display: flex;
  align-items: center; /* 设置垂直居中 */
  gap: 1rem; /* 给图片和文字之间加间距 */
}

/* 给图片设置宽度限制 */
.lobby img {
  max-width: 200px; /* 可根据需求调整 */
  height: auto; /* 保持图片比例 */
}

HTML部分

<!-- 外层容器类名改为content-wrapper，避免冲突 -->
<div class="content-wrapper">
  <div class="column1">
  </div>
  <div class="column2">
    <div class="container2">
      <div class="lobby">
        <img src="img/lobby.jpg" alt="大厅图片" /> <!-- 补充alt文本，提升可访问性 -->
      </div>
      <!-- 内层文字容器类名改为text-content，避免和外层冲突 -->
      <div class="text-content">
        <p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
      </div>
    </div>
  </div>
  <div class="column1">
  </div>
</div>

关键修改点说明： #

• 重命名了重复的content类，避免样式冲突
• 给container2添加align-items: center，实现图片和文字的垂直居中
• 给图片设置max-width和height: auto，限制图片尺寸并保持比例
• 给container2添加gap属性，让图片和文字之间有合理间距
• 给body添加margin: 0 auto，让整体布局居中

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