Styled Components 实现左列文本相对右侧内容垂直居中的方法咨询

原有实现的问题根源 #

• 现在的分栏靠float实现，float元素是脱离文档流的，自身高度只会跟内部内容走，根本匹配不到右列的实际总高度，这是左列没法做垂直居中的核心原因——连自身占的高度都和右列对不齐，自然没法在正确的高度范围内居中
• 代码里重复写了两次一模一样的ColTwoContainer样式定义，后面的声明会直接覆盖前面的，属于完全冗余的无效代码
• 右列靠手动写margin-left: 25%挤位置，后续改左列宽度的时候很容易出现错位，维护成本很高

具体调整方法 #

不用绝对定位，直接把分栏逻辑换成Flex布局就能满足要求，全程走正常文档流，多组组件纵向排列的时候也不会出现定位错乱，改动点非常少：

1. 给最外层的包裹容器加Flex布局，让左右两个列成为同一个Flex上下文的子元素。Flex默认的align-items: stretch规则会自动让两个列的高度和最高的那个（也就是右列）保持一致，不用手动算高度值
2. 去掉左列的float: left，给左列加一层内部Flex布局，设置垂直居中规则，让内部的「col 1 text」在列的全高范围内居中
3. 去掉右列的margin-left:25%，让右列自动占满左列以外的剩余空间，不用手动算边距对齐

修正后的可直接使用的代码 #

export const MyComponent = () => {
  return (
    <Wrapper>
        <ColOneContainer>
          col 1 text
        </ColOneContainer>
        <ColTwoContainer>
          <div>text that might run one line or two</div>
          <div>text that might run one line or two</div>
        </ColTwoContainer>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  display: flex;
  gap: 16px; // 根据设计稿调整列间距即可
`

const ColOneContainer = styled.div`
  width: 25%;
  // 文本垂直居中的核心配置
  display: flex;
  align-items: center;
`

const ColTwoContainer = styled.div`
  flex: 1; // 自动占满剩余宽度
`;

适配性说明 #

• 不管右列的文本是单行还是多行，Flex都会自动调整两列的等高状态，左列的居中文本始终保持和右列整体区域的垂直居中位置，不需要针对不同文本长度单独写样式
• 全程没有用到绝对定位，多组MyComponent纵向排布时会按照正常文档流顺序摆放，不会出现定位重叠、高度塌陷的问题
• 后续调整列宽、列间距时只需要改Flex容器的配置，不用反复手动算边距值

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