从Floats迁移到Flexbox遇问题：用Flex分隔行列并居中列内图片

嘿，我来帮你搞定从Floats转Flexbox遇到的这两个问题！先理清楚你的核心需求：一是让.card里的图片列和内容列分隔开，二是让图片列里的图片居中对齐，同时内容列内的行元素也能正确分隔开。咱们一步步来调整代码：

1. 让图片列里的图片居中 #

原来的.image用了vertical-align: middle，但在Flex容器里这个属性完全不起作用哦。咱们把.image本身也改成Flex容器，用Flex的原生对齐属性就能轻松实现图片的水平+垂直居中：

.card .image {
  border-right: 1px solid #E3E3E3;
  padding: 1.2rem;
  /* 新增这三行，让图片在容器内完美居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

不管图片本身尺寸多大，都会乖乖待在.image容器的正中间啦。

2. 实现列与列、列内行的分隔 #

• 列之间的分隔：你原来给.image加的border-right已经能实现两列的分隔效果，这个可以直接保留，完全符合需求。
• 内容列内的行分隔：.body已经设置了flex-direction: column，里面的.logo、.title、.text是垂直排列的。原来逐个加margin-bottom的写法有点繁琐，用Flex的gap属性更高效——直接在.body里设置垂直间距，不用给每个元素单独加边距：

.card .body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  /* 新增gap，控制内部元素的垂直间距 */
  gap: 0.8rem;
}

另外注意你原来的CSS选择器有问题，title和text应该是类选择器（对应HTML里的自定义类名），不然会影响全局的标签，修正一下：

/* 修正选择器，加上.card前缀避免全局影响 */
.card .title {
  padding: 0;
  /* 如果用了gap，这里的margin-bottom可以去掉，避免重复间距 */
}
.card .text {
  padding: 0;
}

完整的代码示例 #

最后整合所有调整后的代码：

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid green;
  margin-bottom: 0.8rem;
}
.card .image {
  border-right: 1px solid #E3E3E3;
  padding: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.card .logo {
  /* 如果用了gap，这里的margin-bottom可以移除，或根据需求保留 */
  /* margin-bottom: 0.8rem; */
}
.card .title {
  padding: 0;
}
.card .text {
  padding: 0;
}

<div class="card">
  <div class="image"><img src="../img/your-image.png" alt="示例图片"></div>
  <div class="body">
    <div class="logo">Logo内容</div>
    <div class="title">标题内容</div>
    <div class="text">文本内容</div>
  </div>
</div>

这样就能完美实现你要的效果：两列有边框分隔，图片居中对齐，内容列里的每个元素之间都有均匀的垂直间距~

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