如何实现不同长度文本居中且上下排列？React映射数据布局调整

遍历matches数据时，希望每组元素居中且上下依次垂直排列，当前实现的是横向布局，需要调整样式实现垂直排列效果。

现有代码 #

CSS样式 #

.center-things{
  display: flex;
  justify-content: center
}

.imagini-luptatori{
  border: 1px solid #9e9e9e;
  border-radius: 50%;
  margin-left: 10px;
}

JSX代码 #

<div style={{marginTop: '3%'}}>
  {matches.map(({ luptatorUnu, luptatorDoi, uri, key }) => (
    <div className='center-things' style={{marginTop: '2%', alignItems:'center'}} key={key}>
      <p className='nume-luptatori'> {luptatorUnu} </p>
      <img src={uri.luptatorUnu} className='imagini-luptatori'/>
      <p> - </p>
      <img src={uri.luptatorDoi} className='imagini-luptatori'/>
      <p className='nume-luptatori'> {luptatorDoi} </p>
    </div>
  ))}
</div>

解决方案 #

只需要修改CSS的flex布局方向，并调整元素间距即可实现垂直排列：

修改后的CSS #

.center-things{
  display: flex;
  flex-direction: column; /* 设置为垂直排列 */
  justify-content: center;
  align-items: center; /* 确保内部元素水平居中 */
  margin-top: 2%;
}

.imagini-luptatori{
  border: 1px solid #9e9e9e;
  border-radius: 50%;
  margin-top: 8px; /* 替换横向间距为垂直间距 */
}

.nume-luptatori{
  margin: 4px 0; /* 优化名字段落的上下间距 */
}

修改后的JSX（简化内联样式） #

<div style={{marginTop: '3%'}}>
  {matches.map(({ luptatorUnu, luptatorDoi, uri, key }) => (
    <div className='center-things' key={key}>
      <p className='nume-luptatori'>{luptatorUnu}</p>
      <img src={uri.luptatorUnu} className='imagini-luptatori'/>
      <p>-</p>
      <img src={uri.luptatorDoi} className='imagini-luptatori'/>
      <p className='nume-luptatori'>{luptatorDoi}</p>
    </div>
  ))}
</div>

关键修改说明 #

1. 给.center-things添加flex-direction: column，将flex布局的默认横向排列改为垂直排列；
2. 通过align-items: center保证每组内的所有元素都水平居中，结合justify-content: center实现整体居中效果；
3. 调整图片和文本的margin为垂直方向，优化垂直布局的间距，提升视觉效果。

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