使用FLEX实现文本对齐：John下方显示Cena且StarIcon靠右居中

问题出在你直接把John和<p>Cena</p>放在了flex容器里，flex默认横向排列，导致三者挤在一行。要实现需求，只需把两个文本放在同一个子容器里，同时让图标垂直居中对齐。

修改后的代码：

<div className='d-flex justify-content-between align-items-center'>
  <div>
    John
    <p>Cena</p>
  </div>
  <span>StarIcon</span>
</div>

核心调整说明： #

• 给John和Cena套一层<div>，让flex容器将这个文本容器与图标作为两个横向分布的元素
• 给最外层flex容器添加align-items-center类，确保图标在垂直方向上居中
• 内部文本容器默认是块级布局，John和<p>会自然纵向排列

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