CSS双浮动div布局长文本下移 右侧文本居中实现问题

你现在用的「父容器设和高度相等的line-height+text-align:center」的居中方案，本质是单行文本居中hack，只适配单行短文本场景：

• 文本短、不换行时，单行行高等于容器高度，视觉上刚好居中，显示正常
• 文本过长触发换行后，每一行的行高都是12rem，第二行开始的内容直接就被挤到容器外面了；再加你用float布局时右侧文本区没设明确宽度，内容溢出时就会错位跑到div区块下方。

直接把float布局换成flex布局就行，彻底去掉行高hack，长短文本都能正常居中，不会错位：

<div 
  style={{ 
    height: '12rem',
    backgroundColor: '#edf2f4',
    display: 'flex',
    alignItems: 'center',
    padding: '1rem',
    boxSizing: 'border-box'
  }} 
  className="shadow rounded"
>
  {/* 左侧图片区 */}
  <div style={{width: '30%', height: '10rem', flexShrink: 0}}>
    <img 
      src="你的图片链接" 
      style={{ width: '100%', height: '10rem', objectFit: 'contain'}} 
    />
  </div>
  {/* 右侧文本区 */}
  <div style={{ 
    flex: 1,
    paddingLeft: '2rem',
    textAlign: 'center',
    overflow: 'auto'
  }}>
    <p style={{lineHeight: 1.5, margin: 0}}>
      vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv
    </p>
  </div>
</div>

• 删掉父容器原来的lineHeight: '12rem'，避免多行文本行高过大把内容挤到容器外
• 父容器改用flex布局，加alignItems: 'center'实现子元素垂直居中，比float布局稳定，不会出现浮动错位问题
• 左侧图片区加flexShrink:0，防止图片被长文本挤压变形
• 右侧文本区设flex:1，自动占满除图片外的剩余宽度，不用手动计算宽度值
• 给p标签单独设置正常行高（1.5倍即可）、清除默认外边距，多行文本显示更紧凑自然
• 父容器加boxSizing: 'border-box'，内边距不会把容器撑大

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